Question

邮差要求：

邮递员一切都很好。我在服务器上发布了Bearer令牌并得到了预期的结果。

Angular 2请求：

    //app component
    test(){
        return this.httpService.get('api/user/get', 'application/json')
          .subscribe(data=>{
              console.log({'loggedIn': true, 'messageText': 'test succeeded'});
            },
            error=>{
              console.log({'loggedIn': false, 'messageText': error});
            }
          );
      }

//http-service
get(url:string, contentType:string):Observable<any> {
    let baseUrl:string = "http://localhost:1382/";

    let headers = new Headers({
      'Accept': 'application/json'
    });

    //append content-type to headers
    headers.append('Content-type', contentType);

    //check if localStorage contains token. If yes, append authorization to headers
    let token = localStorage.getItem('access_token');
    if (token !== '[object Object]' && token !== null) {
      headers.append('Authorization', 'Bearer' + ' ' + token);
    }

    let requestOptions = new RequestOptions({headers: headers});

    //send get request
    return this.http.get(baseUrl + url, requestOptions)
      .map((res:Response)=>res.json())
      .catch(this.handleError);
  }

它说错误：

OPTIONS http://localhost:1382/api/user/get 405 (Method Not Allowed)

XMLHttpRequest cannot load http://localhost:1382/api/user/get. Response for preflight has invalid HTTP status code 405

<Error>
<Message>Authorization has been denied for this request.</Message>
</Error>

我在Web Api 2 web.config中启用了CORS，如下所示：

<system.webServer>
<httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization, Accept" />
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

有什么建议吗？

Answer 1

它适用于邮递员，因为这是一个扩展，它只是发送请求。
另一方面，从浏览器发送时，出于安全原因，请求的发送方式不同。
首先，浏览器向OPTIONS发送http://foo.com/bar请求（所谓的预检请求）。这是为了确定使用这些参数发送请求是否可接受。
您的后端应处理请求，响应并设置响应标头，如：

Access-Control-Allow-Origin
Access-Control-Allow-Headers
Access-Control-Allow-Credentials
Access-Control-Allow-Methods
等

之后，根据OPTIONS响应的标头，浏览器会将GET发送到http://foo.com/bar如果允许所有内容，例如来源，方法等。

Answer 2

你确实有预检请求（失败了405）。

你可以看到here为什么，可能是由于Content-Type或任何其他标题（X-Requested-With？）。

如果你想保留这个预检，你必须在webapi中处理它并禁用授权或至少返回200（你可以看看here）

Answer 3

感谢大家的回答和建议。我总结了所有这些信息，此外我找到了这个答案：getWorkbook 在context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "http://localhost:4200" });我添加了WebApiConfig

在config.EnableCors(new EnableCorsAttribute("http://localhost:4200, ", "*", "*"));中，我添加了config.EnableCors(new EnableCorsAttribute("http://localhost:4200, ", "*", "*"));，一切正常。

实际上我并不理解为什么评论的作者写了config.EnableCors(new EnableCorsAttribute("http://localhost:4200", "*", "*"));而不是{{1}}但它运作正常。如果有人解释了这一点，那将非常有用。

Web Api 2适用于邮递员，但使用Angular 2失败

3 个答案: