CORS是一個W3C標准，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
一、簡介
CORS需要瀏覽器和服務器同時支持。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低於IE10。
整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對於開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。
因此，實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。
二、兩種請求
瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。
只要同時滿足以下兩大條件，就屬於簡單請求。
（1) 請求方法是以下三種方法之一：
- HEAD
- GET
- POST
（2）HTTP的頭信息不超出以下幾種字段：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限於三個值
application/x-www-form-urlencoded、multipart/form-data、text/plain
凡是不同時滿足上面兩個條件，就屬於非簡單請求。
瀏覽器對這兩種請求的處理，是不一樣的。
三、簡單請求
3.1 基本流程
對於簡單請求，瀏覽器直接發出CORS請求。具體來說，就是在頭信息之中，增加一個Origin字段。
下面是一個例子，瀏覽器發現這次跨源AJAX請求是簡單請求，就自動在頭信息之中，添加一個Origin字段。
上面的頭信息中，Origin字段用來說明，本次請求來自哪個源（協議 + 域名 + 端口）。服務器根據這個值，決定是否同意這次請求。
如果Origin指定的源，不在許可范圍內，服務器會返回一個正常的HTTP回應。瀏覽器發現，這個回應的頭信息沒有包含Access-Control-Allow-Origin字段（詳見下文），就知道出錯了，從而拋出一個錯誤，被XMLHttpRequest的onerror回調函數捕獲。注意，這種錯誤無法通過狀態碼識別，因為HTTP回應的狀態碼有可能是200。
如果Origin指定的域名在許可范圍內，服務器返回的響應，會多出幾個頭信息字段。
Access-Control-Allow-Credentials:true Access-Control-Allow-Headers:Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild Access-Control-Allow-Methods:PUT, POST, GET, DELETE, OPTIONS Access-Control-Allow-Origin:http://localhost:5080
四、非簡單請求
4.1 預檢請求
非簡單請求是那種對服務器有特殊要求的請求，比如請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json。
非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）。
瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答復，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。
下面是一段瀏覽器的JavaScript腳本。
var url = 'http://api.alice.com/cors'; var xhr = new XMLHttpRequest(); xhr.open('PUT', url, true); xhr.setRequestHeader('X-Custom-Header', 'value'); xhr.send();
上面代碼中，HTTP請求的方法是PUT，並且發送一個自定義頭信息X-Custom-Header。
瀏覽器發現，這是一個非簡單請求，就自動發出一個"預檢"請求，要求服務器確認可以這樣請求。下面是這個"預檢"請求的HTTP頭信息。
OPTIONS /cors HTTP/1.1 Origin: http://api.bob.com Access-Control-Request-Method: PUT Access-Control-Request-Headers: X-Custom-Header Host: api.alice.com Accept-Language: en-US Connection: keep-alive User-Agent: Mozilla/5.0...
"預檢"請求用的請求方法是OPTIONS，表示這個請求是用來詢問的。頭信息里面，關鍵字段是Origin，表示請求來自哪個源。
除了Origin字段，"預檢"請求的頭信息包括兩個特殊字段。
（1）Access-Control-Request-Method
該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法，上例是PUT。
（2）Access-Control-Request-Headers
該字段是一個逗號分隔的字符串，指定瀏覽器CORS請求會額外發送的頭信息字段，上例是X-Custom-Header。
說了這么多，下面來個前后端實例：
首先要安裝一下用到的依賴庫
node不用多說
npm install express --save-dev
npm install axios --save
/*
server.js
*/
const express = require('express')
const app = express() //新建App
const userRouter = require('./user')
app.use('/user', userRouter)
app.get('/', function (req, res) { //請求，響應
res.send('<h1>服務器已經起動了</h1>')
})
app.listen(9093, function () { //監聽9093端口
console.log('node app start at port 9093')
})
/*
user.js
*/
const express = require('express')
const Router = express.Router()
Router.get('/list', function (req, res) {
//練習的CORS跨域接口
res.header('Access-Control-Allow-Origin', 'http://localhost:5080'); // * 這個表示任意域名都可以訪問，這樣寫不能攜帶cookie了。 || 'http://localhost:5080'
res.header('Access-Control-Allow-Credentials', true); // 允許服務器端發送Cookie數據,
// 若前端上axios.defaults.withCredentials = true設置為true了，
// 則Access-Control-Allow-Credentials必須為true,否則會請求失敗，報錯
res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');//它也是一個逗號分隔的字符串，表明服務器支持的所有頭信息字段
res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS'); //設置方法
if (req.method == 'OPTIONS') {
res.send(200); //在正常的請求之前，會發送一個驗證，是否可以請求。
} else {
const {type} = req.query
return res.json({code: 0, data: [{name:"mrzou",age:"xxx",id:"5a9deff002555ddddee",type}]})
}
})
/* 前端請求代碼
* import axios from 'axios'
* axios.defaults.withCredentials = true
*
* axios.get('http://localhost:9093/user/list?type=boss').then((res)=> {
* console.log(res)
* }).catch(error=>{
* console.log('跨域error',error)
* })
*/
還有一種為node端配置，直接引入的cors模塊，可以省去設置
npm install cors
const cors = require('cors');
app.use(cors({
origin: 'http://localhost:5080',
methods:['GET','POST'],
alloweHeaders:['Conten-Type', 'Authorization'],
credentials: true // 是否帶cookie
}));
前端請求庫axios設置 axios.defaults.withCredentials = true //必須使用cookie
CORS github地址： https://github.com/expressjs/cors
參考：
阮一峰老師跨域資源共享 CORS 詳解： http://www.ruanyifeng.com/blog/2016/04/cors.html
http://www.cnblogs.com/xuange306/p/6185453.html