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

回答

相關問題