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.

Call基本上是：

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(AKA，我的源代码中唯一的东西是angular)，它只是在Azure web应用程序提供的任何服务器上运行。

在azure中添加nodejs服务器是绕过CORS的唯一选择吗？

Answer 1

Access-Control-Allow-Origin和Access-Control-Allow-Headers是响应报头。他们对你的请求没有位置。

添加自定义标头是生成400错误的印前检查选项请求的触发器之一。

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

如果失败:是的，您需要更改主机，以便它授予您权限。