這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

什么是跨域？

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

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

什么是同源策略

一個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':'*'
});

本文轉載于：

https://juejin.cn/post/7194734127390654520

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：其他

上一篇：js函式中的this指向

下一篇：js函式中的this指向