為什么會(huì)產(chǎn)生跨域怀偷？
由于瀏覽器的限制播玖，不同協(xié)議，域名维蒙，端口的請(qǐng)求都會(huì)產(chǎn)生跨域果覆。
協(xié)議：http https 屬于不同的協(xié)議
域名：www.baidu.a.com? ? www.baidu.b.com? ?屬于不同的域名
端口：localhost:3000? ? localhost:8080 屬于不同的端口
解決跨域問(wèn)題
1、jsonp方法：
在引用外部的CDN的時(shí)候局待，比如jquery,bootstrap，或者圖片的src都可以使用src的標(biāo)簽舰罚，這時(shí)請(qǐng)求不會(huì)被攔截薛耻，因此，jsonp可以說(shuō)是利用了這樣的一個(gè)漏洞昭卓，使用script標(biāo)簽的方法候醒，發(fā)送請(qǐng)求，請(qǐng)求頭中包含一個(gè)回調(diào)函數(shù)倒淫，回調(diào)函數(shù)的參數(shù)帶回來(lái)了請(qǐng)求的數(shù)據(jù)败玉。
缺點(diǎn)：只支持get方法
$('#btn').click(function(){
????var frame = document.createElement('script');
????frame.src = 'http://localhost:3000/article-list?name=leo&age=30&callback=func'; ????$('body').append(frame);
后臺(tái)的相關(guān)處理
如果使用jquery的方法运翼，只需要在$ajax中將dataType寫(xiě)為jsonp
2、proxy
這是在前端里配置文件中處理矩欠，vue-config.js，在根目錄下癌淮，和src平級(jí)
在devServer中配置proxy,
/double：是指請(qǐng)求頭的共同的頭部信息，比如
/double/showEnterpriseInfo? /double/showStudent? /double/invite
這樣就把共同的請(qǐng)求頭拿出來(lái)寫(xiě)在這
target：指的是你發(fā)送請(qǐng)求后臺(tái)接口的地址
changeOrigin：開(kāi)啟代理乳蓄，這樣發(fā)送請(qǐng)求的時(shí)候在請(qǐng)求頭會(huì)加上相應(yīng)信息，后臺(tái)識(shí)別美侦，開(kāi)啟連接
缺點(diǎn)：一些老的瀏覽器不支持這個(gè)方法
優(yōu)點(diǎn)：支持所有的http協(xié)議
3、node中的cors
采用中間件的方法音榜，注冊(cè)并使用中間件
實(shí)現(xiàn)方法：
安裝 npm i node-cors
const cors=require('cors')
app.use(cors)
cors分為簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求
簡(jiǎn)單請(qǐng)求一般都有包含以下方法和字段
head post get 方法
字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個(gè)值application/x-www-form-urlencoded捧弃、multipart/form-data、text/plain
對(duì)于簡(jiǎn)單請(qǐng)求，瀏覽器直接發(fā)出CORS請(qǐng)求买鸽。具體來(lái)說(shuō)，就是在頭信息之中眼五，增加一個(gè)Origin字段。
非簡(jiǎn)單請(qǐng)求是那種對(duì)服務(wù)器有特殊要求的請(qǐng)求批旺，比如請(qǐng)求方法是PUT或DELETE汽煮，或者Content-Type字段的類(lèi)型是application/json棚唆。
非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求，會(huì)在正式通信之前宵凌，增加一次HTTP查詢請(qǐng)求，稱為"預(yù)檢"請(qǐng)求（preflight）失暴。
瀏覽器先詢問(wèn)服務(wù)器，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中逗扒，以及可以使用哪些HTTP動(dòng)詞和頭信息字段。只有得到肯定答復(fù)矩肩，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則就報(bào)錯(cuò)叉袍。
