托管在Azure CORS問題上的Angular 4前端

Question

我正在使用Angular 4構建一個Web應用程序，該應用程序試圖發布到VSTS Rest API。 我顯然不擁有該服務，並且正在嘗試在Azure中而不是在本地實時運行（我知道我可以在Chrome中禁用CORS進行本地測試）。

Failed to load 
https://app.vssps.visualstudio.com/oauth2/tokenRemovedtoStackOverflow 
Response to preflight request doesn't pass access control check: No 'Access-
Control-Allow-Origin' header is present on the requested resource. Origin 
'https://blah.azurewebsites.net' is therefore not allowed access. The 
response had HTTP status code 400.

通話基本上是：

private _appID = blah;
private _tokenRequest = 'client_assertion_type=urn:ietf:params:oauth:client-assertion-type:jwt-bearer&client_assertion={0}&grant_type=urn:ietf:params:oauth:grant-type:jwt-bearer&assertion={1}&redirect_uri={2}';
  private _returnURI = 'https://blah.azurewebsites.net/';
  private headers = new Headers(
    {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': 'Content-type',
      'Content-Type': 'application/x-www-form-urlencoded',
    });

  constructor(private http: Http) { }

  getAccessToken(code: string): Observable<IToken> {
    const _url = 'https://app.vssps.visualstudio.com/oauth2/' + code;
        const body = 'client_assertion_type=urn:ietf:params:oauth:client-assertion-type:jwt-bearer&client_assertion=' +
      this._appID +
      '&grant_type=urn:ietf:params:oauth:grant-type:jwt-bearer&assertion=' +
      code + '&redirect_uri=' +
      this._returnURI;
    const options = new RequestOptions();
    options.headers = this.headers;

      return this.http
        .post(_url, body, options)
        .map((response: Response) => <IToken[]> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);

目前，我沒有服務器/ API（也就是我的資料中唯一的東西是有角的），它正在Azure Web應用程序提供的任何服務器上運行。

我是繞過CORS的唯一選擇，它添加了一個nodejs服務器來將其托管在Azure中？

Answer 1

Access-Control-Allow-Origin和Access-Control-Allow-Headers是響應頭。 他們沒有您的要求的地方。

添加自定義標頭是生成400錯誤的預檢OPTIONS請求的觸發器之一。

刪除它們應該使該請求成為簡單請求，並且可能被服務允許。

失敗：是，您需要更改主機，以便它授予您權限。