1.跨域解決方案一:cors技術(shù)
CORS :全稱cross origin resource share （資源共享）
工作原理： 服務器 在返回響應報文的時候，在響應頭中 設(shè)置一個允許的header
res.setHeader(‘Access-Control-Allow-Origin’, ‘*’)
CORS :全稱cross origin resource share （資源共享）
服務器 在返回響應報文的時候，在響應頭中 設(shè)置一個允許的header
//服務器設(shè)置CORS,允許瀏覽器跨域
res.setHeader('Access-Control-Allow-Origin', '*')
2-express使用中間件cors
官網(wǎng)傳送門:https://www.expressjs.com.cn/resources/middleware.html
xpress有一個自帶的中間件cors，它的作用是自動給每一個res設(shè)置默認請求頭
這樣就不用我們自己每一個接口都要設(shè)置一次了
僅需兩步即可瀟灑搞定!
//1.下包
$ npm install cors
//2配置中間件
var cors = require('cors')
app.use(cors()
cors中間件底層原理如下
app.use((req, res, next) => {//任何請求都會進入這個use中間件
res.setHeader('Access-Control-Allow-Origin', '*')//設(shè)置響應頭
next()//執(zhí)行下一個中間件 })
2.跨域解決方案二：原生jsonp
通過動態(tài)創(chuàng)建script標簽,通過script標簽的src,向一個不同源的接口發(fā)送一個get請求
src屬性發(fā)送請求時，在參數(shù)中額外攜帶一個callback的參數(shù)，參數(shù)值是一個在頁面中預先定于好的函數(shù)名
callback屬性值：預先定義的函數(shù)名，這個函數(shù)必須要在script標簽之前定義
服務器接收到請求之后，獲取callback的參數(shù)值
服務器將要響應的數(shù)據(jù)拼接成 函數(shù)調(diào)用格式，通過傳參的方式將響應數(shù)據(jù)返回給瀏覽器
注意:JSONP只支持get請求，不支持post
3.跨域解決方案三： jQuery中的jsonp
只需要一行代碼
dataType:'jsonp'
底層原理與原生一致，設(shè)置dataType為jsonp，jq會自動動態(tài)幫我們創(chuàng)建一個script標簽，將url放到src屬性中
細節(jié)注意點：jq使用jsonp不需要自己設(shè)置callback，jq會自動幫我們發(fā)送callback參數(shù)，參數(shù)值就是jq的success回調(diào)函數(shù)
4.跨域解決方案四：谷歌瀏覽器設(shè)置跨域
跨域是瀏覽器的一個安全限制,我們可以通過修改一些設(shè)置，讓被設(shè)置的瀏覽器沒有這個同源的限制,自然可以實現(xiàn)跨域
5.區(qū)別
最后的最后總結(jié)一下SONP與CORS的區(qū)別
1.CORS：
服務器返回響應頭，前端無需任何處理
簡單快捷，支持所有請求方式
2.JSONP
瀏覽器：自定義響應回調(diào)函數(shù)，使用script標簽的src請求
利用瀏覽器的src屬性沒有跨域這一限制特點
服務器：接收callback參數(shù)，返回函數(shù)調(diào)用
處理復雜，并且只支持get請求
原因：get請求參數(shù)直接在url后面拼接，而post請求參數(shù)是放在請求體中文章來源：http://www.zghlxwxcb.cn/news/detail-571191.html
未完待續(xù)…文章來源地址http://www.zghlxwxcb.cn/news/detail-571191.html
到了這里，關(guān)于跨域的五種解決方案詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
