什么是跨域？

跨域不是問題，是一種安全機制。瀏覽器有一種策略名為同源策略，同源策略規定了部分請求不能被瀏覽器所接受。

值得一提的是：同源策略導致的跨域是瀏覽器單方面拒絕響應數據，服務器端是處理完畢并做出了響應的。

什么是同源策略

一個url由三部分組成:協議，域名（ip地址），端口。

只有當協議，域名，端口都一致的時候，才被稱為同源。

而同源策略規定，只有發送請求的那一邊和接受請求的那一邊處于同源的情況下，瀏覽器才會接受響應。

舉個例子

發送請求地址:http:47.96.127.5:8080/index    接受請求地址:http:47.96.127.5:8081/index //不同源 端口不同 
發送請求地址:http:47.96.127.5:8080/index     接受請求地址:http:47.96.127.6:8080/index //不同源 ip不同 
發送請求地址:http:47.96.127.5:8080/index     接受請求地址:https:47.96.127.5:8080/index //不同源 協議不同 
發送請求地址:http:47.96.127.5:8080/index     接受請求地址:http:47.96.127.5:8080/login //同源 協議，端口，ip都相同，路徑不同無所謂

而當我們的請求不符合同源策略的時候。往往會出現以下錯誤👇

解決跨域常見的5種方法

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

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

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

在JQ項目中，這是最常見的解決方案。

第二種:script標簽解決跨域(遠古Web項目中使用)

如果你的項目是祖傳下來的。沒有框架連JQuery都沒有。沒關系，我們可以嘗試使用原生的方法去解決。

原生采用的是script標簽可以不受跨域限制的特性來實現跨域。

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

這里需要注意的是，使用完請求之后記得刪除script,否則會隨著請求的變多script標簽會一直掛載在DOM上。

在遠古的web中，這是一種方案。但現在已經不用了。

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

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

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

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

第四種：服務端代理（Nginx代理）

nginx代理一般使用在生產環境。是服務端解決跨域的一種方案。

簡單配置模板👇

#如果監聽到請求接口地址是 www.xxx.com/api/page ，nginx就向http://www.yyy.com:9999/api/page這個地址發送請求 
server {      
listen       80;          
server_name  www.xxx.com;         #判過濾出含有api的請求         
location /api/ {              
proxy_pass http://www.yyy.com:9999; #真實服務器的地址         
} }

注意，nginx配置完代理后需要重啟nginx，nginx代理是生產環境的常用方案

第五種:后臺（邏輯層）添加響應頭解決

Access-Control-Allow-Origin響應頭的意思是，安全同行的請求。

舉個例子 http://192.168.0.103:8080 向http://192.168.0.102:8080 發送了請求，結果因為域名不一樣，在返回信息的時候因為IP地址不一致被攔截。

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

//響應頭 
Access-Control-Allow-Origin':'http:/ /192.168.0.103:8080'

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

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

當然，我們也可以進行所有域名均不攔截的設置（如下）

//響應頭 
// * 代表所有域名均不攔截 
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':'*' 
});