資訊專欄INFORMATION COLUMN
摘要：通過將屬性設置為，可以指定某個請求應該發送憑據。前臺跨域請求，由于規范的存在，瀏覽器會首先發送一次嗅探，同時帶上，判斷是否有跨域請求權限，服務器響應的值，供瀏覽器與匹配，如果匹配則正式發送請求。
話不多說，一個字，干！
前端配置如下：
axios.defaults.withCredentials = true; //配置為true
axios.post("http://localhost:3000/tpzdz/vote/all", {
openid: "oJ0mVw4QrfS603gFa_uAFDADH2Uc",
date: "2018-11-21"
}).then(function (response) {
console.log(response)
})
前端配置withCredentials = true 后端的跨域也需要配置
app.use(async (ctx, next) => {
ctx.set("Access-Control-Allow-Origin", ctx.request.header.origin);
ctx.set("Access-Control-Allow-Credentials", true);
await next();
});
//防止每次請求都返回Access-Control-Allow-Methods以及Access-Control-Max-Age，
//這兩個響應頭其實是沒有必要每次都返回的，只是第一次有預檢的時候返回就可以了。
app.use(async (ctx, next) => {
if (ctx.method === "OPTIONS") {
ctx.set("Access-Control-Allow-Methods", "PUT,DELETE,POST,GET");
ctx.set("Access-Control-Max-Age", 3600 * 24);
ctx.body = "";
}
await next();
});
實例展示完了，我們來講講都是怎么回事
withCredentials:默認情況下，跨源請求不提供憑據(cookie、HTTP認證及客戶端SSL證明等)。通過將withCredentials屬性設置為true，可以指定某個請求應該發送憑據。
默認值為false。
true：在跨域請求時，會攜帶用戶憑證
false：在跨域請求時，不會攜帶用戶憑證；返回的 response 里也會忽略 cookie
當配置了 withCredentials = true時，必須在后端增加 response 頭信息Access-Control-Allow-Origin，且必須指定域名，而不能指定為*?。?！
那么問題就來了，若是多個域名呢？
我配置的是任意域名都可以訪問，但是這樣并不安全。建議做法是創建一個數組，每次去檢測域名是否在數組內，存在則繼續
講到這里了，那么延伸一下 post請求下的options
options 它是一種探測性的請求，通過這個方法，客戶端可以在采取具體資源請求之前，決定對該資源采取何種必要措施，或者了解服務器的性能。
前臺跨域post請求，由于CORS（cross origin resource share）規范的存在，瀏覽器會首先發送一次options嗅探，同時header帶上origin，判斷是否有跨域請求權限，服務器響應access control allow origin的值，供瀏覽器與origin匹配，如果匹配則正式發送post請求。
每一次非簡單請求都會實際上發出兩次請求，一次預檢一次真正請求，這就比較損失性能了。
所以就有了2圖的中間件。 Access-Control-Max-Age: 86400
設置一個相對時間，在該非簡單請求在服務器端通過檢驗的那一刻起，當流逝的時間的毫秒數不足Access-Control-Max-Age時，就不需要再進行預檢，可以直接發送一次請求。
但是為什么會有兩個中間件的設置呢，推薦文章 https://www.jb51.net/article/... 很細致哦
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100454.html
這個百度貼吧的項目是 vue + koa + sequelize 的項目。 由于沒有百度貼吧API接口，所以自己寫了后端 項目部分截圖（GIF） showImg(https://user-gold-cdn.xitu.io/2019/7/13/16bea513a0805b84?w=480&h=1040&f=gif&s=4456077);showImg(https://user-gold-cdn.xi...
摘要：查找原因無法獲取到是因為同源策略和標記的原因。在同一個站點下使用屬性是無效的。此外，這個指示也會被用做響應中被忽視的標示。而通過設置為獲得的第三方，將會依舊享受同源策略，因此不能被通過或者從頭部相應請求的腳本等訪問。 作者：codexu _ showImg(https://segmentfault.com/img/remote/1460000020161476); 瀏覽器里明明存在的c...
摘要：同源策略禁止使用對象向不同源的服務器地址發起請求。借助于決解同源策略決解同源策略，新方案跨域資源共享這里講的重點跨域資源共享提供的標準跨域解決方案，是一個由瀏覽器共同遵循的一套控制策略，通過的來進行交互主要通過后端來設置配置項。 了解下同源策略 源（origin）*：就是協議、域名和端口號； 同源： 就是源相同，即協議、域名和端口完全相同； 同源策略：同源策略是瀏覽器的一個安全...
閱讀 2086·2023-04-25 19:15
閱讀 2262·2021-11-23 09:51
閱讀 1270·2021-11-17 09:33
閱讀 2175·2021-08-26 14:15
閱讀 2487·2019-08-30 15:54
閱讀 1585·2019-08-30 15:54
閱讀 2175·2019-08-30 12:50
閱讀 1138·2019-08-29 17:08
