托管在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请求的触发器之一。

删除它们应该使该请求成为简单请求，并且可能被服务允许。

失败：是，您需要更改主机，以便它授予您权限。