c# - Web Api 2 与 postman 一起工作但与 Angular 2 一起失败

Question

postman 要求:

postman 一切都很好。我在服务器上发布了 Bearer token 并获得了预期的结果。

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

它在 postman 中工作，因为那是一个扩展，它只是发送请求。
另一方面，当从浏览器发送时，出于安全原因，请求的发送方式不同。
首先，浏览器向http://foo.com/bar发送一个OPTIONS请求(所谓的预检请求)。这是为了确定是否可以接受使用这些参数发送请求。
您的后端应该处理请求、响应并设置响应 header ，例如:

• Access-Control-Allow-Origin
• Access-Control-Allow-Headers
• Access-Control-Allow-Credentials
• 访问控制允许方法
• 等等

之后，浏览器会根据OPTIONS 响应的 header ，将GET 发送到http://foo.com/bar 如果一切都被允许，比如来源、方法等。