承接上文 HTTP訪(fǎng)問(wèn)控制(CORS)
關(guān)于CORS的說(shuō)明械巡，這篇MDN文章 論述地非常詳細(xì)七婴、精彩乳怎，建議大家先閱讀幾遍彩郊。
知識(shí)點(diǎn)
簡(jiǎn)單請(qǐng)求
- 只使用GET、HEAD蚪缀、POST
- 不使用自定義請(qǐng)求頭
預(yù)請(qǐng)求
- GET秫逝、HEAD、POST以外的請(qǐng)求询枚，或POST內(nèi)容不為
text/plain,
application/x-www-form-urlencoded和multipart/form-data
類(lèi)型 - 使用自定義請(qǐng)求頭
預(yù)請(qǐng)求流程：
HTTP響應(yīng)頭
Access-Control-Allow-Origin: http://www.example.com
配置Access-Control-Allow-Origin: *則允許所有域名訪(fǎng)問(wèn)违帆；需要注意的是，該頭部是無(wú)法配置多個(gè)域名的金蜀，因此需通過(guò)nginx或者程序控制刷后。
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
設(shè)置允許瀏覽器訪(fǎng)問(wèn)的響應(yīng)頭白名單。
Access-Control-Max-Age: 100
設(shè)置預(yù)請(qǐng)求緩存時(shí)間（單位秒）渊抄。預(yù)請(qǐng)求會(huì)導(dǎo)致2次請(qǐng)求roundtrip尝胆，是會(huì)影響服務(wù)性能的。
Access-Control-Allow-Credentials: true
原文的解釋有點(diǎn)繞护桦，通俗點(diǎn)講含衔，就是與客戶(hù)端xhr.withCredentials = true配套使用，用來(lái)傳遞cookie的二庵。
Access-Control-Allow-Methods: GET, HEAD, POST, PUT, DELETE, OPTIONS
由于rest接口通常會(huì)有PUT | DELETE等操作贪染，所以導(dǎo)致該響應(yīng)頭也成為標(biāo)配。
Access-Control-Allow-Headers: X-PINGOTHER, X-HEADER
預(yù)請(qǐng)求中告訴瀏覽器可以使用哪些自定義頭部眨猎。
HTTP請(qǐng)求頭
- Origin
- Access-Control-Request-Method
- Access-Control-Request-Headers（請(qǐng)求中會(huì)使用的自定義HTTP頭）
請(qǐng)求頭比較簡(jiǎn)單抑进，不贅述强经。
開(kāi)工擼代碼
// 客戶(hù)端請(qǐng)求時(shí)睡陪，記得設(shè)置 xhr.withCredentials = true
// express中間件
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://www.example.com');
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Access-Control-Allow-Methods', 'GET, HEAD, POST, PUT, DELETE, OPTIONS');
next();
});
