中國建設(shè)銀行河北省分行官方網(wǎng)站,百度網(wǎng)站怎么申請注冊,淄博網(wǎng)站建設(shè)高端企業(yè),wdcp搭建網(wǎng)站跨域#xff08;CORS#xff09;原因及解決方案 文章目錄跨域#xff08;CORS#xff09;原因及解決方案什么是跨域#xff1f;瀏覽器的同源策略什么是跨域#xff1f;如何解決跨域JSONP#xff08;比較老的方法#xff0c;不推薦#xff09;CORS #xff08;服務(wù)器端…跨域CORS原因及解決方案文章目錄跨域CORS原因及解決方案什么是跨域瀏覽器的同源策略什么是跨域如何解決跨域JSONP比較老的方法不推薦CORS 服務(wù)器端設(shè)置瀏覽器跨域配置開發(fā)階段測試使用webpack/vite 等工程化工具中配置什么是跨域瀏覽器的同源策略瀏覽器有一個重要的安全機(jī)制叫 同源策略Same-Origin Policy。它的意思是瀏覽器只允許網(wǎng)頁向和自己“同源”的地址發(fā)送請求否則就攔截。同源的定義是協(xié)議http/ https、域名或 IP、端口號 三者完全相同。假設(shè)你的網(wǎng)頁地址是http://localhost:3000/index.html目標(biāo)地址目標(biāo)地址是否同源原因http://localhost:3000/api/data?同源協(xié)議、域名、端口號都一樣https://localhost:3000/api/data?不同源協(xié)議不同https httphttp://127.0.0.1:3000/api/data?不同源域名不同localhost 127.0.0.1什么是跨域當(dāng)你訪問一個不同源的接口時瀏覽器會因為同源策略阻止這個請求這就是跨域。通?？刂婆_會出現(xiàn)這樣的錯誤如何解決跨域JSONP比較老的方法不推薦解決方法瀏覽器生成一個script元素訪問數(shù)據(jù)接口服務(wù)器響應(yīng)一段js代碼調(diào)用某個函數(shù)并把響應(yīng)數(shù)據(jù)傳入前端代碼functionjsonp(url){constscriptdocument.createElement(script);script.srcurl;// 為了不影響頁面script加載過后將其移除script.addEventListener(load,(){script.remove();)}jsonp(請求的url地址);// 服務(wù)器返回的js函數(shù)functioncallback(data){console.log(data);}服務(wù)器端代碼router.get(/,async(req,res){constresultawaitstuServ.getStudents();res.status(200).send(getResult(result));// jsonp 實現(xiàn)跨域// 首先將 content-type的值設(shè)置為 “application/javascript”// 修改返回的數(shù)據(jù)將數(shù)據(jù)放入到callback函數(shù)中res.header(content-type,application/javascript).send(callback(${JSON.stringify(result)}));});JSONP的問題會打亂服務(wù)器的消息格式j(luò)sonp要求服務(wù)器響應(yīng)js代碼但是在非跨域情況下服務(wù)器又需要響應(yīng)一個正常的json合適。只能完成GET請求瀏覽器的script標(biāo)簽發(fā)出的請求只能是get請求。CORS 服務(wù)器端設(shè)置CORS是基于http1.1的一種跨域解決方案它的全稱是Cross-Origin Resource Sharing跨域資源共享?？傮w思路如果瀏覽器要跨域訪問服務(wù)器資源需要獲得服務(wù)器的允許。三種不同的交互模式簡單請求需要同時滿足的條件請求方法屬于getpost head 中的一種請求頭僅包含安全的字段常見安全字段如下AcceptAccept-languageContent-TypeContent-languageDPRDownLinkSave-DataViewport-WidthWidth請求頭如果包含 Content-Type值只能為text/plainmultipart/form-dataapplication/x-www-form-urlencoded當(dāng)瀏覽器判定某個ajax請求為簡單請求時會在請求頭中自動添加Origin字段告訴服務(wù)器是哪個源地址在跨域請求服務(wù)器響應(yīng)頭中應(yīng)該包含Access-Control-Allow-Origin允許跨域請求代碼實現(xiàn)constallowOrigins[origin1,origin2,...];if(origininreq.headersallowOrigins.includes(req.headers.origin)){res.header(access-control-allow-origin,req.headers.origin);}需要預(yù)檢的請求若瀏覽器判定ajax請求不是一個簡單的請求就會按照下面的流程進(jìn)行瀏覽器發(fā)送預(yù)檢請求OPTIONS詢問服務(wù)器是否允許服務(wù)器允許瀏覽器發(fā)送真實請求服務(wù)器完成真實響應(yīng)例如有一個需要預(yù)檢的跨域請求fetch(http://myRequest.com/api/test,{method:POST,header:{Content-Type:application/json,a:a,b:b},body:JSON.stringify({name:abc,age:18})}).then(resres.json()).then(dataconsole.log(data));此時瀏覽器會發(fā)送一個預(yù)檢請求詢問服務(wù)器是否允許預(yù)檢請求有以下特征請求方法為OPTIONS沒有請求體請求頭中包含Origin請求的源和簡單請求的含義一致Access-Control-Request-Method后續(xù)的真實請求將使用的請求方法Access-Control-Request-Headers后續(xù)的真實請求會改動的請求頭若服務(wù)器允許需要在請求頭中添加Access-Control-Allow-Method: 允許的后續(xù)真實請求Access-Control-Allow-Headers: 允許改動的請求頭Access-Control-Allow-Origin允許的源Access-Control-Max-Age告訴瀏覽器多少秒內(nèi)對于同樣的請求源、方法、頭都不需要再發(fā)送預(yù)檢請求了示例代碼constallowOrigins[origin1,origin2,...];if(req.methodOPTIONS){res.header(Access-Control-Allow-Methods,req.header(access-control-request-method));res.header(Access-Control-Allow-Headers,req.header(access-control-request-headers));}if(origininreq.headersallowOrigins.includes(req.headers.origin)){res.header(access-control-allow-origin,req.headers.origin);}附帶身份憑證的請求有一些場景需要請求攜帶cookie只需要在響應(yīng)頭中添加Access-Control-Allow-Credentials: true即可。對于一個附帶身份憑證的請求若服務(wù)器沒有明確告知瀏覽器仍然視為跨域被拒絕。note:對于跨域請求nodejs中可以使用 cors庫來實現(xiàn)也可以自己封裝跨域的中間件。瀏覽器跨域配置開發(fā)階段測試使用谷歌瀏覽器為例1. 新建目錄如C:MyChromeDevUserData。??2. 右鍵快捷方式→屬性→在“目標(biāo)”字段末尾添加 --disable-web-security --user-data-dirC:MyChromeDevUserData注意參數(shù)前有空格。??若原目標(biāo)值帶引號參數(shù)需加在引號外。??webpack/vite 等工程化工具中配置module.exports{// 其他配置...devServer:{// 其他devServer配置...proxy:{/api:{target:http://example.com,// 目標(biāo)服務(wù)器地址changeOrigin:true,// 是否改變源地址pathRewrite:{^/api:},// 重寫路徑// 其他代理配置...}}}};