角2個HTTP POST數據返回，但轉到錯誤（CORS）

Question

我做一個HTTP POST請求到微軟登錄獲得訪問令牌與郵件API來使用，請求成功，但是代碼去的錯誤條款我的代碼。

requestAccessToken(code: string) 
{ 
console.log("request access token"); 
if (code) { 
    var headers = new Headers(); 
    headers.append("Content-Type", 'application/x-www-form-urlencoded'); 
    headers.append('Accept', 'application/json'); 
    var requestoptions = new RequestOptions({ 
    headers: headers 
    }); 
    var body = `grant_type=authorization_code& 
       redirect_uri=http://localhost:4200& 
       code=`+ code + `& 
       client_id=4e[................]5ab& 
       client_secret=CE[..............]BC`; 

    this.http.post("https://login.microsoftonline.com/common/oauth2/v2.0/token", body, requestoptions).map((res: Response) => 
    { 
    console.log("response given"); 
    const data = res.json(); 
    }).subscribe((data) => { 
    console.log("The data is = " + data); 
    }, error => { 
    console.log("The error is = " + error) 
    }); 
} 

瀏覽器控制檯顯示此： 的XMLHttpRequest無法加載https://login.microsoftonline.com/common/oauth2/v2.0/token。請求的資源上沒有「Access-Control-Allow-Origin」標題。因此不允許訪問原產地'http://localhost:4200'。 zone.js：2019 XHR加載失敗：POST「https://login.microsoftonline.com/common/oauth2/v2.0/token」。 outlook.service.ts：96錯誤與狀態=響應：0網址：空

這裏是截圖顯示它更好

現在真正的問題是，我請求成功，如下圖所示：

和響應顯示我的訪問令牌。那麼爲什麼我無法從代碼中獲得它？爲什麼會出現錯誤條款。

Answer 1

你看到的發送跨來源POST到不包括在其響應的Access-Control-Allow-Origin響應頭的服務器時，是預期的行爲。

具體來說，只要你的跨域請求沒有的特性，這將導致你的瀏覽器做你POST請求（其中您的要求不）之前做preflight OPTIONS request那麼POST請求將在服務器副作用成功但是，因爲從服務器到POST請求的響應不包括Access-Control-Allow-Origin響應頭，您的瀏覽器阻止能夠真正看到服務器發送響應您的前端代碼。

然而，如果你打開的瀏覽器devtools你仍然可以看到響應出現。但僅僅因爲瀏覽器收到了響應，並且您可以在devtools中看到它，這並不意味着瀏覽器會將響應暴露給您的代碼。它只會在Access-Control-Allow-Origin時暴露。

---

這一切似乎違反直覺的，但如果你還記得的是，瀏覽器是在哪個跨域限制實施的唯一的一點是都有道理。服務器不會阻止跨源請求。

當你發送的服務器POST請求接收請求時，它不檢查來源以決定是否響應。服務器只接受POST請求並對其進行處理，然後發送響應。但是，瀏覽器會阻止您的代碼訪問該響應。

但同樣重要的是要記住，瀏覽器不會阻止您的代碼從發送POST請求跨源。當請求具有觸發瀏覽器執行preflight的質量（如特殊標頭）時，瀏覽器僅阻止發送跨源請求。

因此，因爲您的POST請求不是觸發預檢的請求，所以瀏覽器發送它併成功。

爲了便於比較，請考慮交叉源GET請求會發生什麼情況。在這種情況下，只要GET請求不是觸發預檢的請求，瀏覽器就不會拒絕發送它。不管怎樣，瀏覽器將請求發送到服務器。並且服務器收到該請求併發送響應。

只有當這種反應回來的東西不同的情況發生，因爲再次，在這種情況下，如果響應不包括Access-Control-Allow-Origin響應頭的瀏覽器，那麼你的瀏覽器將不會讓你前端JavaScript代碼訪問它。

但是很明顯，因爲提出GET請求的全部要點是對響應進行一些操作，那麼在這種情況下，如果您的代碼無法訪問響應，那麼這是一個嚴重的徹底失敗 - 與POST請求，其中請求主體實際上仍然按預期發佈，但是您只是沒有辦法讓代碼檢查響應以查看請求是否成功。

Answer 2

你已經用「CORS」正確標記您的文章。現代瀏覽器不允許跨域訪問端點，除非端點發送允許您訪問它的cors-headers。

如果您檢查您的網絡選項卡上，應該有一個選項 - 請求https://login.microsoftonline.com/common/oauth2/v2.0/token。這稱爲preflight-request，它檢查Access-Control-Allow-Origin和Access-Control-Allow-Methods標頭。 Access-Control-Allow-Origin必須包含您的域或*，並且Control-Allow-Methods必須包含POST或*。

我不熟悉辦公室的apis，但我認爲必須有一種方法來配置您的應用程序作爲有效的終端。也許這篇文章將幫助您：https://msdn.microsoft.com/en-us/office/office365/howto/create-web-apps-using-cors-to-access-files-in-office-365