CORS記錄

CORS 詳解

CORS：跨域資源共享機制。使用額外的 HTTP 頭來告訴瀏覽器 讓運行在一個 origin (domain) 上的Web應用被准許訪問來自不一樣源服務器上的指定的資源。當一個資源從與該資源自己所在的服務器不一樣的域、協議或端口請求一個資源時，資源會發起一個跨域 HTTP 請求。要想實現CORS跨域，就須要服務器和客戶端都作一些配置。

服務端配置

以node服務端爲例，使用了express。主要代碼以下：

const express = require('express');
const app = express();
app.get('/', function (req, res) {
  res.header('Access-Control-Allow-Origin', 'http://dev.ganji.com:8008');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Expose-Headers', 'Date');
  res.header('Access-Control-Request-Headers', 'X-Custom-Header');
  res.header('Access-Control-Allow-Methods', 'GET,POST,OPTIONS,PUT');
  res.json({
    ...
  })
})
var server = app.listen(8081, function () {})

下面對配置項簡單介紹：

Access-Control-Allow-Origin

容許跨域訪問域名，請求端的域名或者 *，* 表示任意域名均可以訪問。

Access-Control-Allow-Credentials

跨域後默認不攜帶cookie和http的認證信息的，因此就須要添加配置，表示服務器明確許可攜帶cookie。此時須要注意Origin不能設置爲 *， 必須明確指定與請求網頁域名一致。
服務端：

res.header('Access-Control-Allow-Credentials', true);

客戶端須要在請求中添加withCredentials屬性：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

請求信息

Access-Control-Expose-Headers

默認xhr對象的response header中只能拿到六個基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma，能夠在此設置想要拿到的其餘字段。

res.header('Access-Control-Expose-Headers', 'Date');

簡單請求

簡單請求條件：
一、請求方法

• GET
• POST
• HEAD

二、頭信息不能超過下邊範圍

• Accept
• Accept-Language
• Content-Language

• Content-Type 取值範圍爲：

  • text/plain
  • multipart/form-data
  • application/x-www-form-urlencoded

三、XMLHttpRequestUpload 中沒有註冊事件監聽器

簡單請求的客戶端和服務端請求過程：

複雜請求

若是不知足簡單請求的條件，則會發送複雜請求。複雜請求會先用OPTIONS方法發起一個預檢請求到服務器，服務器容許後，再發送真實請求。
過程下圖：

實際請求信息：
第一次的預檢請求：

第二次實際請求：

複雜請求配置介紹：

Access-Control-Request-Method

複雜請求時必須配置，用來指定瀏覽器的CORS請求會用到哪些HTTP方法，上圖中的 PUT。

res.header("Access-Control-Allow-Methods","PUT")

Access-Control-Request-Headers

瀏覽器CORS請求會額外發送的頭信息字段。逗號分隔的字符串。

總結

CORS是服務端和瀏覽器配合完成的跨域請求，感受主要是服務端配置好後，瀏覽器根據服務端的配置的頭部和提供的可用的CORS方法來實現跨域。