Question

我正在使用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（AKA，我的源中唯一的东西是角度），它只是在Azure Web应用程序提供的任何服务器上运行。

我唯一的选择是绕过CORS添加一个nodejs服务器来托管这个吗？

Answer 1

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

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

删除它们会导致请求成为一个简单的请求，服务可能会允许该请求。

失败：是的，你需要更改主机以便它授予你许可。

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

1 个答案: