网页API 2个工程与邮递员，但失败角2

一切与邮差的伟大工程。我在服务器上发布了不记名令牌，并得到了预期的结果

角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>

我启用了CORS的网络API 2 web.config中像下面：

<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>

有什么建议？

来源

2017-02-27 Dato Maisuradze

似乎有点显而易见，但是您是否调试过/检查了它实际上正在触发该代码（即正在追加令牌）并且令牌实际上是否有效？ 'if（token！=='[object O ...'语句对我来说有点嫌疑。你也可以检查提琴手的流量。有时你不会发送你认为你发送的东西！：）...有时候，格式错误的请求可能会导致出现错误。 – HockeyJ

如果您试图*暂时对所有请求信息（URL，标头等）进行硬编码，只是为了确保它不是get（）方法中存在错误的逻辑？换句话说，就像你在Postman中一样输入所有的数据。 – AngularChef

你可以看看实际的网络请求，并验证你有所有的邮件头添加像邮递员？ – eminlala

实际上您确实有预检请求（与405一起失败）。

你可以看到here为什么，可能是由于内容类型或任何其他头（X-Requested-With？）。

如果你想保持这种预检你必须处理它的WebAPI和禁用授权或至少回报200（你可以看看here）

来源

2017-02-27 10:33:51

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

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

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

来源

2017-02-27 12:42:43

谢谢大家的回答和建议。我总结了所有这些信息，此外，我发现这个答案：https://stackoverflow.com/a/39397016/4559099 在GrantResourceOwnerCredentials我加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", "*", "*"));但它工作正常。如果有人解释这一点，这将非常有帮助。

来源

2017-02-28 10:15:00

网页API 2个工程与邮递员，但失败角2

回答

相关问题