使用koa開發想要開啟 cors 非常簡單,已經有對應的庫:@koa/cors。
const cors =
require
('@koa/cors'
)use
(cors()
);
只需要兩行,介面就會在返回資料的時候帶上access-control-allow-origin
響應頭。預設允許所有請求方式跨域即access-control-allow-origin
預設為*
。
為了安全考慮,攜帶cookies的跨域請求只允許access-control-allow-origin
為單一網域名稱,即只支援乙個網域名稱在請求的時候攜帶cookies。且需要帶上響應頭access-control-allow-credentials
對@koa/cors
新增配置origin和credentials:
const cors =
require
('@koa/cors'
)use
(cors()
);
同時,前端要發起攜帶cookies的跨域請求,需要設定withcredentials
為true
,如果你是使用axios,只需要在請求配置裡加上一句withcredentials: true
,請看例子:
export
const
upload
=(requestparams)
=>
)}
這樣前端(
)就可以向後端(http://localhost:8000
)傳送請求了。
如果你的前端位址只有乙個,給@koa/cors
的origin新增乙個網域名稱就能滿足需求,如果需要支援跨域的網域名稱有多個呢?
通過觀察@koa/cors
的 單元測試用例,可以發現origin是支援用函式的方式傳入的。這樣我們就可以維護乙個網域名稱陣列,判斷請求位址是否在網域名稱陣列內,就能知道是否要對請求位址提供攜帶cookies請求支援了。
要想知道發起請求的前端位址,可以使用ctx.request.header.origin
。
// 允許的網域名稱陣列
arr_ym =
['',''
,'']use
(cors(}
, credentials:
true})
);
注意ctx.request.header.origin
和ctx.request.origin
是不同的。ctx.request.origin
是介面網域名稱,ctx.request.header.origin
是發起請求的頁面網域名稱。 CORS 跨域攜帶 Cookie 傳送請求
當在 a.com 進行訪問時,如何向 b.com 攜帶 b.com 的 cookie 傳送乙個請求?a.com 是乙個第三方 需要通過訪問 b.com 的介面來獲取使用者的一些資訊。這時候,b.com 上的使用者已經登入了。我們知道,在傳送跨域請求時,需要後端設定一些請求頭,否則瀏覽器不會允許客戶端...
springboot配置CORS允許跨域訪問
參考 cors 跨域資源共享 springboot配置cors解決跨域請求問題 真實請求允許的方法 access control allow methods get,post,put,delete 伺服器允許使用的字段 access control allow headers x custom he...
koa跨域問題及koa2 cors中介軟體
網路協議不同,如http協議訪問https協議。網域名稱不同,如qianduanblog.com訪問baidu.com。埠不同,如80埠訪問8080埠。子網域名稱不同,如abc.qianduanblog.com訪問def.qianduanblog.com。網域名稱和網域名稱對應ip,如www.a.c...