什么是跨域？

跨域不是問(wèn)題，是一種安全機(jī)制。瀏覽器有一種策略名為同源策略，同源策略規(guī)定了部分請(qǐng)求不能被瀏覽器所接受。

值得一提的是：同源策略導(dǎo)致的跨域是瀏覽器單方面拒絕響應(yīng)數(shù)據(jù)，服務(wù)器端是處理完畢并做出了響應(yīng)的。

什么是同源策略

一個(gè)url由三部分組成:協(xié)議，域名（ip地址），端口。

只有當(dāng)協(xié)議，域名，端口都一致的時(shí)候，才被稱(chēng)為同源。

而同源策略規(guī)定，只有發(fā)送請(qǐng)求的那一邊和接受請(qǐng)求的那一邊處于同源的情況下，瀏覽器才會(huì)接受響應(yīng)。

舉個(gè)例子

發(fā)送請(qǐng)求地址:http:47.96.127.5:8080/index    接受請(qǐng)求地址:http:47.96.127.5:8081/index //不同源 端口不同 
發(fā)送請(qǐng)求地址:http:47.96.127.5:8080/index     接受請(qǐng)求地址:http:47.96.127.6:8080/index //不同源 ip不同 
發(fā)送請(qǐng)求地址:http:47.96.127.5:8080/index     接受請(qǐng)求地址:https:47.96.127.5:8080/index //不同源 協(xié)議不同 
發(fā)送請(qǐng)求地址:http:47.96.127.5:8080/index     接受請(qǐng)求地址:http:47.96.127.5:8080/login //同源 協(xié)議，端口，ip都相同，路徑不同無(wú)所謂

而當(dāng)我們的請(qǐng)求不符合同源策略的時(shí)候。往往會(huì)出現(xiàn)以下錯(cuò)誤👇

解決跨域常見(jiàn)的5種方法

第一種:JQuery的ajax(推薦JQuery項(xiàng)目中使用)

jq的ajax自帶解決跨域的方法。底層原理采用的JSONP的跨域解決方案。如下

function callback(){     
console.log("月薪一千五，心比美式苦") }  
$.ajax({     
url: 'http://www.domain2.com:8080/login',     
type: 'get',     
dataType: 'jsonp',  // 請(qǐng)求方式為jsonp  設(shè)置跨域的重點(diǎn)     
jsonpCallback: "callBack",  // 回調(diào)函數(shù) 
});

在JQ項(xiàng)目中，這是最常見(jiàn)的解決方案。

第二種:script標(biāo)簽解決跨域(遠(yuǎn)古Web項(xiàng)目中使用)

如果你的項(xiàng)目是祖?zhèn)飨聛?lái)的。沒(méi)有框架連JQuery都沒(méi)有。沒(méi)關(guān)系，我們可以嘗試使用原生的方法去解決。

原生采用的是script標(biāo)簽可以不受跨域限制的特性來(lái)實(shí)現(xiàn)跨域。

<script>             
// 回調(diào)             
function callBack(res) {                 
console.log("跨域的回調(diào)",res);                // ...完成你所有操作后記得刪除script↓                
document.head.getElementsByClassName("script")[0].remove();             
}              
const scriptDom = document.createElement('script');             
scriptDom.type = 'text/javascript';             
scriptDom.class = 'script'; //用于刪除             
// 傳參一個(gè)回調(diào)函數(shù)名給后端，方便后端返回時(shí)執(zhí)行這個(gè)在前端定義的回調(diào)函數(shù)             
scriptDom.src = 'http://192.167.0.152:9996/inface?callback=callBack';             
document.head.appendChild(script); //將標(biāo)簽掛載到dom上         
</script>

這里需要注意的是，使用完請(qǐng)求之后記得刪除script,否則會(huì)隨著請(qǐng)求的變多script標(biāo)簽會(huì)一直掛載在DOM上。

在遠(yuǎn)古的web中，這是一種方案。但現(xiàn)在已經(jīng)不用了。

vue/react/jq等框架性項(xiàng)目中不要使用這種方法，不是不行，只是有更好的選擇

第三種:前端代理解決跨域

每一個(gè)框架的代理配置都不太一樣。這里僅以我使用的umi.js(react)為例。

Umi.js框架會(huì)有 config.ts / config.js 文件，文件中會(huì)有proxy字段、字段按圖中配置方法。即可完成跨域

第四種：服務(wù)端代理（Nginx代理）

nginx代理一般使用在生產(chǎn)環(huán)境。是服務(wù)端解決跨域的一種方案。

簡(jiǎn)單配置模板👇

#如果監(jiān)聽(tīng)到請(qǐng)求接口地址是 www.xxx.com/api/page ，nginx就向http://www.yyy.com:9999/api/page這個(gè)地址發(fā)送請(qǐng)求 
server {      
listen       80;          
server_name  www.xxx.com;         #判過(guò)濾出含有api的請(qǐng)求         
location /api/ {              
proxy_pass http://www.yyy.com:9999; #真實(shí)服務(wù)器的地址         
} }

注意，nginx配置完代理后需要重啟nginx，nginx代理是生產(chǎn)環(huán)境的常用方案

第五種:后臺(tái)（邏輯層）添加響應(yīng)頭解決

Access-Control-Allow-Origin響應(yīng)頭的意思是，安全同行的請(qǐng)求。

舉個(gè)例子 http://192.168.0.103:8080 向http://192.168.0.102:8080 發(fā)送了請(qǐng)求，結(jié)果因?yàn)橛蛎灰粯?，在返回信息的時(shí)候因?yàn)?span style="color: rgb(77, 208, 225);font-weight: 700">IP地址不一致被攔截。

但是如果http://192.168.0.102:8080 在響應(yīng)頭中的 Access-Control-Allow-Origin 字段中攜帶上屬性值'http://192.168.0.103:8080' 如下

//響應(yīng)頭 
Access-Control-Allow-Origin':'http:/ /192.168.0.103:8080'

這就等于告訴瀏覽器，http://192.168.0.102:8080 這個(gè)地址是安全的，請(qǐng)不要攔截。

這樣，http://192.168.0.103:8080 就可以接受來(lái)自 http://192.168.0.102:8080 返回的信息。

當(dāng)然，我們也可以進(jìn)行所有域名均不攔截的設(shè)置（如下）

//響應(yīng)頭 
// * 代表所有域名均不攔截 
Access-Control-Allow-Origin':'*'

node案例如下

res.writeHead(200, {     
Access-Control-Allow-Origin':'http://192.168.0.103:8080' 
});  
//或者  
res.writeHead(200, {     
Access-Control-Allow-Origin':'*' 
});