同源策略:
它是瀏覽器?最核心也最基本的安全功能雳攘,——不同的客戶端腳本在沒(méi)有明確授權(quán)的情況下,不能讀寫(xiě)對(duì)方資源
跨域: 只要協(xié)議枫笛,域名吨灭,端口有任何一個(gè)不同,的都被當(dāng)做不同的域
解決跨域問(wèn)題 :
? ?參考網(wǎng)址:https://www.cnblogs.com/yoissee/p/5901677.html
? ? 方法一:
?? ??? ?JSONP 是 JSON 的一種使用模式刑巧,可以解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)問(wèn)題喧兄。其原理是根據(jù) XmlHttpRequest 對(duì)象受到同源策略的影響,而?<script>?標(biāo)簽元素卻不受同源策略影響啊楚,可以加載跨域服務(wù)器上的腳本吠冤,網(wǎng)頁(yè)可以從其他來(lái)源動(dòng)態(tài)產(chǎn)生 JSON 資料。用 JSONP 獲取的不是 JSON 數(shù)據(jù)特幔,而是可以直接運(yùn)行的 JavaScript 語(yǔ)句咨演。
jsonp
1. 只能使用 GET 方法發(fā)起請(qǐng)求,這是由于?script?標(biāo)簽自身的限制決定的蚯斯。
2.不能很好的發(fā)現(xiàn)錯(cuò)誤薄风,并進(jìn)行處理。與 Ajax 對(duì)比拍嵌,由于不是通過(guò) XmlHttpRequest 進(jìn)行傳輸遭赂,所以不能注冊(cè) success、 error 等事件監(jiān)聽(tīng)函數(shù)横辆。
CORS:
?? ??? ?Cross-Origin Resource Sharing(CORS)跨域資源共享是一份瀏覽器技術(shù)的規(guī)范撇他,提供了 Web 服務(wù)從不同域傳來(lái)沙盒腳本的方法,以避開(kāi)瀏覽器的同源策略狈蚤,是 JSONP 模式的現(xiàn)代版困肩。與 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求脆侮。用 CORS 可以讓網(wǎng)頁(yè)設(shè)計(jì)師用一般的 XMLHttpRequest锌畸,這種方式的錯(cuò)誤處理比 JSONP 要來(lái)的好。另一方面靖避,JSONP 可以在不支持 CORS 的老舊瀏覽器上運(yùn)作√对妫現(xiàn)代的瀏覽器都支持 CORS。
?CORS 的實(shí)現(xiàn)
app.post('/cors', function(req, res) {
?res.header("Access-Control-Allow-Origin", "*"); //設(shè)置請(qǐng)求來(lái)源不受限制
????res.header("Access-Control-Allow-Headers", "X-Requested-With");??
????res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); //請(qǐng)求方式
????res.header("X-Powered-By", ' 3.2.1')
????res.header("Content-Type", "application/json;charset=utf-8");
????var data = {
????????name: req.body.name + ' - server 3001 cors process',
????????id: req.body.id + ' - server 3001 cors process'
????}
????console.log(data)
????res.send(data)
????res.end()
})
CORS 與 JSONP 的對(duì)比
CORS 除了 GET 方法外幻捏,也支持其它的 HTTP 請(qǐng)求方法如 POST盆犁、 PUT 等。
CORS 可以使用 XmlHttpRequest 進(jìn)行傳輸篡九,所以它的錯(cuò)誤處理方式比 JSONP 好谐岁。
JSONP 可以在不支持 CORS 的老舊瀏覽器上運(yùn)作。