CORS跨域詳解
阿新 • • 發佈:2019-01-02
CORS跨域詳解
注:此文章只為本人自己的瞭解,如有問題可以私聊。
一. 簡介
CORS是一個W3C標準,全稱是“跨域資源共享”(Cross-origin resource sharing)。CORS允許瀏覽器向跨源伺服器發出XMLHttpRequest請求,以克服AJAX只能基於同源策略的使用限制。
先來補充個小知識
簡單請求和非簡單請求
非簡單請求是相對於簡單請求而言的
非簡單請求是那種對伺服器有特殊要求的請求,比如請求方法是PUT
或DELETE
,或者Content-Type
欄位的型別是application/json
,而非簡單請求的CORS請求,會在正式通訊之前,增加一次HTTP
二. 基本使用
server.all('*',function(req,res,next){
res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Credentials", true);
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');
//為了方便返回json
res.header("Content-Type", "application/json;charset=utf-8");
if(req.method=="OPTIONS"){
//讓options請求快速返回,如果是預檢請求直接返回200
res.sendStatus(200);
}else{
next();
}
});
以下是每個塊的詳解
Access-Control-Allow-Origin
該欄位是必須的。它的值要麼是請求時
Origin
欄位的值,要麼是一個*
,表示接受任意域名的請求。
Access-Control-Allow-Credentials
該欄位可選。它的值是一個布林值,表示是否允許傳送Cookie。預設情況下,Cookie不包括在
CORS
請求之中。設為true,即表示伺服器明確許可,Cookie可以包含在請求中,一起發給伺服器。這個值也只能設為true,如果伺服器不要瀏覽器傳送Cookie,刪除該欄位即可。
Access-Control-Allow-Headers
如果瀏覽器請求包括
Access-Control-Request-Headers
欄位,則Access-Control-Allow-Headers
欄位是必需的。它也是一個逗號分隔的字串,表明伺服器支援的所有頭資訊欄位,不限於瀏覽器在"預檢"中請求的欄位。一般用來指定瀏覽器可額外發送的請求頭。
Access-Control-Allow-Methods
它的值是逗號分隔的一個字串,表明伺服器支援的所有跨域請求的方法。注意,返回的是所有支援的方法,而不單是瀏覽器請求的那個方法。這是為了避免多次"預檢"請求。
X-Powered-By
這個值的意義用於告知網站是用何種語言或框架編寫的,可以不寫。
Content-Type
避免返回的值是亂碼
這次分享只是本人自己的理解,如有問題,請聯絡我。