http頭部字段Origin和Access-Control-Allow-Origin解決請求跨域
Http協(xié)議中請求頭和響應(yīng)頭
Http協(xié)議中請求頭和響應(yīng)頭攜帶了很多信息，其中 請求頭 Origin，響應(yīng)頭 Access-Control-Allow-Origin 與跨域有關(guān)。
為了驗(yàn)證跨域，要將客戶端和服務(wù)端分配在不同端口，這里通過 nodejs 在8080端口起一個服務(wù)，用于響應(yī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 頁面，發(fā)送 get 請求向本地的 8080 端口
<script>
const url = 'http://127.0.0.1:8000'
fetch(url).then(res=>{
console.log('請求結(jié)果',res)
})
</script>再通過5500端口打開頁面，會發(fā)現(xiàn)請求發(fā)送失敗，控制臺報錯【被跨域策略阻止了】
跨域
通過查看請求信息可以發(fā)現(xiàn)，請求頭部字段 Origin 標(biāo)識著當(dāng)前請求url
請求頭origin
同域下才可以發(fā)送異步請求，是瀏覽器的保護(hù)策略，在響應(yīng)頭告知瀏覽器哪些來源允許跨域，則可以不受瀏覽器的限制。
const server = http.createServer((req,res)=>{
res.setHeader("Access-control-allow-origin","http://127.0.0.1:5500")
res.end('hello 8000~')
});
再次發(fā)送get請求，就可以響應(yīng)頭上增加了Access-control-allow-origin屬性，并且請求成功，返回200的狀態(tài)碼
響應(yīng)成功
以上就是http頭部字段Origin和Access-Control-Allow-Origin解決請求跨域的詳細(xì)內(nèi)容，更多關(guān)于http解決請求跨域的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
layer.prompt使文本框?yàn)榭盏那闆r下也能點(diǎn)擊確定的方法
今天小編就為大家分享一篇layer.prompt使文本框?yàn)榭盏那闆r下也能點(diǎn)擊確定的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript制作sql轉(zhuǎn)換為stringBuffer的小工具
這篇文章主要介紹了javascript制作sql轉(zhuǎn)換為stringBuffer的小工具，使用方法很簡單，吧寫好的sql語句只要格式化好之后放進(jìn)去就可以了，推薦給大家，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要介紹了Js實(shí)現(xiàn)簡單的小球運(yùn)動特效的相關(guān)資料,需要的朋友可以參考下2016-02-02
響應(yīng)式表格之固定表頭的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄憫?yīng)式表格之固定表頭的簡單實(shí)現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
JavaScript實(shí)現(xiàn)敏感信息脫敏的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)敏感信息脫敏,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
JavaScript實(shí)現(xiàn)簡易聊天對話框(加滾動條)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易聊天對話框，附加滾動條功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
多個jquery.datatable共存,checkbox全選異常的快速解決方法
這篇文章主要介紹了多個jquery.datatable共存,checkbox全選異常的快速解決方法。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
在開始設(shè)計你的腳本之前，要考慮的第一件事情就是檢查一下你要為其編寫腳本的HTML代碼，看看有什么東西可以幫助你達(dá)到目的。2008-10-10
這篇文章主要介紹了js神秘的電報密碼 哈弗曼編碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
javascript中onmouse事件在div中失效問題的解決方法
我們預(yù)期只有當(dāng)鼠標(biāo)從div中移開的時候才會觸發(fā)onmouseout事件，可事實(shí)上，當(dāng)我們移到div中的元素時，例如：本例中的a標(biāo)簽時，就會觸發(fā) onmousout事件2012-01-01