什么是CORS?
創(chuàng)新互聯(lián)建站長(zhǎng)期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為汝城企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作,汝城網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
默認(rèn)情況下,為預(yù)防某些而已行為,瀏覽器的XHR對(duì)象只能訪問(wèn)來(lái)源于同一個(gè)域中的資源。但是我們?cè)谌粘?shí)際開(kāi)發(fā)中,常常會(huì)遇到跨域請(qǐng)求的需求,因此就出現(xiàn)了一種跨域請(qǐng)求的方案:CORS(Cross-Origin Resource Sharing)跨域資源共享。
CORS背后的原理是:使用自定的HTTP頭部與服務(wù)器進(jìn)行溝通,從而由服務(wù)器決定響應(yīng)是否成功。
了解下同源策略
為什么要跨域限制
跨域決解方案
CORS(跨域資源共享)
CORS簡(jiǎn)單使用
之前說(shuō)得CORS跨域,嗯嗯,后端設(shè)置Access-Control-Allow-Origin:*|[或具體的域名]就好了;
第一次嘗試:
app.use(async(ctx,next) => { ctx.set({ "Access-Control-Allow-Origin": "http://localhost:8088" })
發(fā)現(xiàn)有些請(qǐng)求可以成功,但是有些還是會(huì)報(bào)錯(cuò):
請(qǐng)求被同源策略阻止,預(yù)請(qǐng)求的響應(yīng)沒(méi)有通過(guò)檢查:http返回的不是ok?
并且發(fā)現(xiàn)發(fā)送的是OPTIONS請(qǐng)求:
發(fā)現(xiàn):CORS規(guī)范將請(qǐng)求分為兩種類型,一種是簡(jiǎn)單請(qǐng)求,另外一種是帶預(yù)檢的非簡(jiǎn)單請(qǐng)求
簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求
瀏覽器發(fā)送跨域請(qǐng)求判斷方式:
什么是簡(jiǎn)單請(qǐng)求
1、請(qǐng)求方法是如下之一:
2、所有的Header都只包含如下列表中(沒(méi)有自定義header):
除此之外都是非簡(jiǎn)單請(qǐng)求
CORS非簡(jiǎn)單請(qǐng)求配置須知
正如上圖報(bào)錯(cuò)顯示,對(duì)于非簡(jiǎn)單請(qǐng)求,瀏覽器會(huì)先發(fā)送options預(yù)檢,預(yù)檢通過(guò)后才會(huì)發(fā)送真是的請(qǐng)求;
發(fā)送options預(yù)檢請(qǐng)求將關(guān)于接下來(lái)的真實(shí)請(qǐng)求的信息給服務(wù)器:
Origin:請(qǐng)求的源域信息
Access-Control-Request-Method:接下來(lái)的請(qǐng)求類型,如POST、GET等
Access-Control-Request-Headers:接下來(lái)的請(qǐng)求中包含的用戶顯式設(shè)置的Header列表
服務(wù)器端收到請(qǐng)求之后,會(huì)根據(jù)附帶的信息來(lái)判斷是否允許該跨域請(qǐng)求,通過(guò)Header返回信息:
Access-Control-Allow-Origin:允許跨域的Origin列表
Access-Control-Allow-Methods:允許跨域的方法列表
Access-Control-Allow-Headers:允許跨域的Header列表,防止遺漏Header,因此建議沒(méi)有特殊需求的情況下設(shè)置為*
Access-Control-Expose-Headers:允許暴露給JavaScript代碼的Header列表
Access-Control-Max-Age:最大的瀏覽器預(yù)檢請(qǐng)求緩存時(shí)間,單位為s
CORS完整配置
koa配置CORS跨域資源共享中間件:
const cors = (origin) => { return async (ctx, next) => { ctx.set({ "Access-Control-Allow-Origin": origin, //允許的源 }) // 預(yù)檢請(qǐng)求 if (ctx.request.method == "OPTIONS") { ctx.set({ 'Access-Control-Allow-Methods': 'OPTIONS,HEAD,DELETE,GET,PUT,POST', //支持跨域的方法 'Access-Control-Allow-Headers': '*', //允許的頭 'Access-Control-Max-Age':10000, // 預(yù)檢請(qǐng)求緩存時(shí)間 // 如果服務(wù)器設(shè)置Access-Control-Allow-Credentials為true,那么就不能再設(shè)置Access-Control-Allow-Origin為*,必須用具體的域名 'Access-Control-Allow-Credentials':true // 跨域請(qǐng)求攜帶身份信息(Credential,例如Cookie或者HTTP認(rèn)證信息) }); ctx.send(null, '預(yù)檢請(qǐng)求') } else { // 真實(shí)請(qǐng)求 await next() } } } export default cors
現(xiàn)在不管是簡(jiǎn)單請(qǐng)求還是非簡(jiǎn)單請(qǐng)求都可以跨域訪問(wèn)啦~
跨域時(shí)如何處理cookie
cookie:
問(wèn)題:
決解:
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。