CORS 跨域資源共享

跨域資源共享 CORS 詳解

ajax同源

  • 協(xié)議相同
  • 域名相同
  • 端口相同

CORS cross-origin resource sharing()
是一個w3c的標準
允許瀏覽器向跨源服務(wù)器,發(fā)出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。

CORS需要瀏覽器和服務(wù)器同時支持
目前,所有瀏覽器都支持該功能
實現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實現(xiàn)了CORS接口,就可以跨源通信。

簡單請求(同時滿足下面兩種條件):

  • get或者post
  • Content-Type的值只能為下面三種:application/x-www-form-urlencoded、multipart/form-data、text/plain

瀏覽器發(fā)現(xiàn)這次跨源AJAX請求是簡單請求,就自動在頭信息之中,添加一個Origin字段
,用于請求來自哪個源(協(xié)議 + 域名 + 端口)

例如:Origin: http://api.bob.com

如果源不在許可范圍內(nèi),服務(wù)器回應(yīng)的頭信息沒有包含Access-Control-Allow-Origin字段,瀏覽器發(fā)現(xiàn)后會拋出錯誤,但是狀態(tài)碼依舊可能是200

如果源在許可范圍內(nèi),服務(wù)器返回的響應(yīng),會多出幾個頭信息字段,這里主要說一下必須的那個字段

  • Access-Control-Allow-Origin
    該字段是必須的。它的值要么是請求時Origin字段的值,要么是一個*,表示接受任意域名的請求。

非簡單請求
比如請求方法是PUT或DELETE,或者Content-Type字段的類型是application/json。

非簡單請求的CORS請求,會在正式通信之前,增加一次HTTP查詢請求,稱為"預(yù)檢"請求(preflight)。
預(yù)檢成功,響應(yīng)頭會帶下面幾個

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000 // 預(yù)檢成功后的有效時間 毫秒

具體解決

node express

var app = express();
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); //  這里設(shè)置請求服務(wù)器的ip
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});

另外個有一個別人寫好的github cors

感覺幾行代碼可以解決問題就不需要用工具了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容