Angular 4 前端托管在 Azure CORS 问题上答案

【问题标题】：Angular 4 Front End hosted on Azure CORS IssueAngular 4 前端托管在 Azure CORS 问题上
【发布时间】：2018-03-06 15:34:51
【问题描述】：

我正在使用 Angular 4 构建一个 Web 应用程序，它试图 POST 到 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（也就是我的源代码中唯一的东西是 angular），它只是在 Azure Web 应用程序提供的任何服务器上运行。

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

【问题讨论】：

标签： javascript node.js angular azure cors

【解决方案1】：

Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 是响应标头。他们对你的要求没有地位。

添加自定义标头是产生 400 错误的预检 OPTIONS 请求的触发器之一。

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

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

【讨论】：