HTTP訪問控制（CORS）踩坑小記

xiongzenghui 發布于2019-08-22 15:26 / 1264人閱讀

摘要：前幾天在幫后端排查一個的問題的時候發現的一些小坑特此記錄的本質是出于安全原因，瀏覽器限制從腳本內發起的跨源請求。排查發現訪問失敗的都是需要用戶的登錄態的。

前幾天在幫后端排查一個cors的問題的時候發現的一些小坑特此記錄

cors的本質是出于安全原因，瀏覽器限制從腳本內發起的跨源HTTP請求。 例如，XMLHttpRequest和Fetch
API遵循同源策略。 這意味著使用這些API的Web應用程序只能從加載應用程序的同一個域請求HTTP資源，除非使用CORS頭文件。
跨域并非一定是瀏覽器限制了跨站請求，也有可能是跨站請求可以正常發起，但是返回結果被瀏覽器攔截了。最好的例子是 CSRF
跨站攻擊原理，請求是發送到了后端服務器無論是否跨域！注意：有些瀏覽器不允許從 HTTPS 的域跨域訪問 HTTP，比如 Chrome 和
Firefox，這些瀏覽器在請求還未發出的時候就會攔截請求。

本case場景描述如下：
用戶在a.com域名下跨域訪問b.com域名下的api接口，使用了XMLHttpRequest的跨域頭請求。域名b.com也允許了可以跨域 Access-Control-Allow-Origin 但是很奇怪在訪問b.com的接口時有些api能訪問成功，有些api訪問失敗。排查發現訪問失敗的api都是需要用戶的登錄態的。但是用戶已經在b.com登錄過了。把XMLHttpRequest請求換成jsonp請求則都可以請求成功(這好像是廢話)。。。由此推測XMLHttpRequest 添加cors頭的時候沒有把b.com的用戶cookie信息帶過去。

翻看MDN文檔https://developer.mozilla.org... 找到答案如下：

Fetch 與 CORS 的一個的特性是，可以基于 HTTP cookies 和 HTTP 認證信息發送身份憑證。一般而言，對于跨域 XMLHttpRequest 或 Fetch 請求，瀏覽器不會發送身份憑證信息。如果要發送憑證信息，需要設置 XMLHttpRequest 的某個特殊標志位。

var invocation = new XMLHttpRequest();
var url = "http://bar.other/resources/credentialed-content/";
    
function callOtherDomain(){
  if(invocation) {
    invocation.open("GET", url, true);
    invocation.withCredentials = true;//這個是重點
    invocation.onreadystatechange = handler;
    invocation.send(); 
  }
}

將 XMLHttpRequest 的 withCredentials 標志設置為 true，從而向服務器發送 Cookies。服務器端的響應需要攜帶 Access-Control-Allow-Credentials: true ，瀏覽器才會把響應內容返回給請求的發送者。

另外需要注意的是
對于附帶身份憑證的請求，服務器不得設置 Access-Control-Allow-Origin 的值為“”。這是因為請求的首部中攜帶了 Cookie 信息，如果 Access-Control-Allow-Origin 的值為“”，請求將會失敗。而將 Access-Control-Allow-Origin 的值設置為 http://foo.example，則請求將成功執行。

tips:
在跨域訪問時，XMLHttpRequest對象的getResponseHeader()方法只能拿到一些最基本的響應頭，Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，如果要訪問其他頭，則需要服務器設置本響應頭Access-Control-Expose-Headers 頭讓服務器把允許瀏覽器訪問的頭放入白名單，例如：

Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header

其他詳細信息見我的博客

GPU云服務器云服務器 http無法訪問 http 訪問 webrtc 專有網絡http無法訪問 iOS無法訪問HTTP

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93469.html

HTTP訪問控制（CORS）踩坑小記

摘要：前幾天在幫后端排查一個的問題的時候發現的一些小坑特此記錄的本質是出于安全原因，瀏覽器限制從腳本內發起的跨源請求。排查發現訪問失敗的都是需要用戶的登錄態的。前幾天在幫后端排查一個cors的問題的時候發現的一些小坑特此記錄 ** cors的本質是出于安全原因，瀏覽器限制從腳本內發起的跨源HTTP請求。例如，XMLHttpRequest和FetchAPI遵循同源策略。這意味著使用這些A...

wujl596 2019-08-01 18:42 評論0 收藏0
前端渲染與SEO優化踩坑小記

摘要：前言在網站頁面后端渲染的時代，開發者只需要按照規范制作搜索引擎友好的頁面便可以快速讓搜索引擎收錄自己網站的各個頁面。前言在網站頁面后端渲染的時代，開發者只需要按照規范制作搜索引擎友好的頁面便可以快速讓搜索引擎收錄自己網站的各個頁面。隨著前后端技術的更新，越來越多的前端框架進入開發者們的視野，網站的前后分離架構越來越得到開發者們的喜愛與認可。后端只提供數據接口、業務邏輯與持久化服...

wums 2019-07-25 10:46 評論0 收藏0
前端渲染與SEO優化踩坑小記

摘要：前言在網站頁面后端渲染的時代，開發者只需要按照規范制作搜索引擎友好的頁面便可以快速讓搜索引擎收錄自己網站的各個頁面。前言在網站頁面后端渲染的時代，開發者只需要按照規范制作搜索引擎友好的頁面便可以快速讓搜索引擎收錄自己網站的各個頁面。隨著前后端技術的更新，越來越多的前端框架進入開發者們的視野，網站的前后分離架構越來越得到開發者們的喜愛與認可。后端只提供數據接口、業務邏輯與持久化服...

Benedict Evans 2019-08-20 10:37 評論0 收藏0