Angular 4.3 HttpClient不發送授權標頭

我試圖使用Angular的HttpClient發送帶授權標頭的請求，但標頭沒有成功設置。Angular 4.3 HttpClient不發送授權標頭

在這裏我的代碼。

import {HttpClient, HttpHeaders} from '@angular/common/http'; 


constructor(private http: HttpClient, 
      private auth: AuthService) { 
} 

sendRequest() { 
    this.http.get(this.url, { 
    headers: new HttpHeaders().set('Authorization', 'Bearer ' + this.auth.getAccessToken()) 
    }).subscribe(
    data => { 
     console.log(data); 
    }, 
    error => { 
     console.log(error); 
    } 
); 
}

而這裏的網絡調試頭源。

OPTIONS /userinfo HTTP/1.1 
Host: localhost:8080 
Connection: keep-alive 
Access-Control-Request-Method: GET 
Origin: http://localhost:4200 
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 
Access-Control-Request-Headers: authorization 
Accept: */* 
Referer: http://localhost:4200/user 
Accept-Encoding: gzip, deflate, br 
Accept-Language: ja,en-US;q=0.8,en;q=0.6

響應標題如下。

HTTP/1.1 400 Bad Request 
Access-Control-Allow-Origin: * 
Content-Type: text/plain; charset=utf-8 
X-Content-Type-Options: nosniff 
Date: Sun, 27 Aug 2017 23:45:15 GMT 
Content-Length: 18

有什麼問題嗎？

來源

2017-08-27 dchiba

也嘗試將useCredentials設置爲true。 – yoonjesung

請參閱答案在https://stackoverflow.com/questions/43871637/no-access-control-allow-origin-header-is-present-on-the-requested-resource-whe/43881141#43881141 – sideshowbarker

我明白，我根本不瞭解CORS。我會研究並開始回覆。謝謝你的建議。 – dchiba

如果您查看問題中包含的標題，您將看到這是一個OPTIONS請求。這表明你試圖發出一個跨站點的請求，並且瀏覽器的CORS（跨源資源共享）協議被踢入。

你顯然做了一個GET請求，其憑證對一個域（或端口號）這與提出請求的頁面的來源不同。實際上，我們從標題中看到起源是端口4200（角度開發服務器的標準端口），並且請求是針對端口8080（可能是java後端？）。

標準CORS協議用於瀏覽器通過發送OPTIONS請求來查看Access-Control-Allow-Origin報頭是否返回，指出允許源訪問目的地，從而執行「預檢」檢查。

如果標題返回正常，那麼瀏覽器將發出GET請求。如果沒有，你會得到一個401迴應。

所有這些都是由瀏覽器完成的，並且超出了你的控制範圍。

規範（https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0）說，當瀏覽器發送OPTIONS請求作爲預檢的一部分時，它不能包含您的授權頭 - 只能在GET上發送。

所以，不 - 這裏沒有什麼錯 - 它按預期工作。

現在，如果在此之後，您將獲得401並且GET從不發送，那麼您將不得不修改服務器以發送適當的Access-Control-Allow-Origin標頭以響應OPTIONS請求。

欲瞭解更多信息CORS，請參閱https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

來源

2017-08-27 04:24:38 GreyBeardedGeek

對不起，泄露的信息。服務器端也自己實現，並且「Access-Control-Allow-Origin」頭以「*」返回。響應標題被添加到問題文本中。 – dchiba

我明白我根本不懂CORS。我會研究並開始回覆。謝謝你的建議。 – dchiba

Angular 4.3 HttpClient不發送授權標頭

回答

相關問題