http頭部字段Origin和Access-Control-Allow-Origin解決請(qǐng)求跨域
Http協(xié)議中請(qǐng)求頭和響應(yīng)頭
Http協(xié)議中請(qǐng)求頭和響應(yīng)頭攜帶了很多信息，其中 請(qǐng)求頭 Origin，響應(yīng)頭 Access-Control-Allow-Origin 與跨域有關(guān)。
為了驗(yàn)證跨域，要將客戶端和服務(wù)端分配在不同端口，這里通過 nodejs 在8080端口起一個(gè)服務(wù)，用于響應(yīng)客戶端的請(qǐng)求
const http = require('http');
const server = http.createServer((req,res)=>{
res.end('hello 8000~')
});
server.listen(8000,()=>{
console.log('監(jiān)聽8000端口')
})如果通過瀏覽器url上直接輸入地址訪問，響應(yīng) hello 8080~
8080端口起的服務(wù)
客戶端新建 html 頁(yè)面，發(fā)送 get 請(qǐng)求向本地的 8080 端口
<script>
const url = 'http://127.0.0.1:8000'
fetch(url).then(res=>{
console.log('請(qǐng)求結(jié)果',res)
})
</script>再通過5500端口打開頁(yè)面，會(huì)發(fā)現(xiàn)請(qǐng)求發(fā)送失敗，控制臺(tái)報(bào)錯(cuò)【被跨域策略阻止了】
跨域
通過查看請(qǐng)求信息可以發(fā)現(xiàn)，請(qǐng)求頭部字段 Origin 標(biāo)識(shí)著當(dāng)前請(qǐng)求url
請(qǐng)求頭origin
同域下才可以發(fā)送異步請(qǐng)求，是瀏覽器的保護(hù)策略，在響應(yīng)頭告知瀏覽器哪些來(lái)源允許跨域，則可以不受瀏覽器的限制。
const server = http.createServer((req,res)=>{
res.setHeader("Access-control-allow-origin","http://127.0.0.1:5500")
res.end('hello 8000~')
});
再次發(fā)送get請(qǐng)求，就可以響應(yīng)頭上增加了Access-control-allow-origin屬性，并且請(qǐng)求成功，返回200的狀態(tài)碼
響應(yīng)成功
以上就是http頭部字段Origin和Access-Control-Allow-Origin解決請(qǐng)求跨域的詳細(xì)內(nèi)容，更多關(guān)于http解決請(qǐng)求跨域的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js中有各種與位置相關(guān)的屬性,每次看到的時(shí)候都各種懵逼,索性一次總結(jié)一下,這篇文章主要給大家介紹了關(guān)于js中位置計(jì)算的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
本文主要介紹了Js apply方法的相關(guān)知識(shí)，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
微信小程序返回上一頁(yè)刷新組件數(shù)據(jù)的示例代碼
這篇文章主要介紹了微信小程序返回上一頁(yè)刷新組件數(shù)據(jù)的相關(guān)資料,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-03-03
怎么限制input的text里輸入的值只能是數(shù)字(正則、js)
這篇文章主要通過正則表達(dá)式和JS代碼限制input的text里輸入的值只能是數(shù)字的相關(guān)資料,需要的朋友可以參考下2016-05-05
閉包（closure）是Javascript語(yǔ)言的一個(gè)難點(diǎn)，也是它的特色，很多高級(jí)應(yīng)用都要依靠閉包實(shí)現(xiàn)。小編之前一直糊里糊涂的，沒有能夠弄明白JavaScript的閉包到底是什么，有什么用，本文把自己的理解些出來(lái)分享一下，希望不理解JavaScript閉包的朋友們看了之后能夠理解閉包！2016-01-01
使一個(gè)函數(shù)作為另外一個(gè)函數(shù)的參數(shù)來(lái)運(yùn)行的javascript代碼
使一個(gè)函數(shù)作為另外一個(gè)函數(shù)的參數(shù)來(lái)運(yùn)行的javascript代碼...2007-08-08
Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能
本文主要介紹了Javascript實(shí)現(xiàn)登錄記住用戶名和密碼功能的代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
window.name 的美妙之處：name 值在不同的頁(yè)面（甚至不同域名）加載后依舊存在，并且可以支持非常長(zhǎng)的 name 值（2MB）。2008-09-09
Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案（回調(diào)函數(shù)和事件）更合理和更強(qiáng)大,下面這篇文章主要介紹了js進(jìn)階教程之promise全方位解析和異步編程的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-10-10
這篇文章主要介紹了如何在CocosCreator中做一個(gè)List，對(duì)List列表感興趣的同學(xué)，不妨來(lái)試驗(yàn)一下2021-04-04