阿里P7架構(gòu)師是如何解決跨域問題的！你有遇到嗎？

發(fā)布時(shí)間：2020-08-06 15:56:03 來源：網(wǎng)絡(luò) 閱讀：258 作者：愛碼仕i 欄目：編程語言

現(xiàn)在越來越多的項(xiàng)目就算是一個(gè)管理后端也偏向于使用前后端分離的部署方式去做，為了順應(yīng)時(shí)代的潮流，一前后端分離就產(chǎn)生了跨域問題，所以許多同學(xué)把跨域和前后端分離項(xiàng)目聯(lián)系在了一起，其實(shí)跨域產(chǎn)生的原因并不是前后端分離導(dǎo)致的，那我們一起來看一下，希望可以靠這一篇文章解答大家所有的跨域問題

一、跨域產(chǎn)生的條件

使用xmlHttpRequest,即我們通常說的ajax請(qǐng)求
瀏覽器做了這個(gè)事
訪問的域名不同，即訪問的html頁面是a域名下的，但內(nèi)部js發(fā)送的ajax請(qǐng)求的目標(biāo)地址卻是b域名

以上三個(gè)條件缺一不可，尤其是第三個(gè)條件許多做移動(dòng)端的同學(xué)可能都沒有聽過，因?yàn)橐苿?dòng)端爽爽的用各種http請(qǐng)求狂發(fā)不同的域名，但是瀏覽器不允許我們這么做，為了一個(gè)詞安全

二、如何解決跨域問題

解決跨域問題的根本就是要打破上述的三個(gè)限制中的任何一個(gè)，我們來看一下逐個(gè)擊破的方式

JSONP方式

jsonp是打破第一重限制，用了XMLHttpRequest就跨域，那我不用這種方式了，我們?cè)趺醋龅模瑏砜匆欢蝚query的帶jsonp的ajax請(qǐng)求

$.ajax({
   type : "GET",
   url : "http://api.map.baidu.com/geocoder/v2/",
   data:"address=上海",
   dataType:"jsonp",
   jsonp:"callback",
   jsonpCallback:"showLocation",
   success : function(data){
       alert("成功");
   },
   error : function(data){
       alert("失敗");
   }
});

看似用了ajax請(qǐng)求，其實(shí)內(nèi)部完全不是那么回事，多了jsonp和jsonpCallback選項(xiàng)，它內(nèi)部將代碼翻譯并把頁面上的dom操作成這樣

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type='text/javascript'>
      // 后端返回直接執(zhí)行的方法，相當(dāng)于執(zhí)行這個(gè)方法，由于后端把返回的數(shù)據(jù)放在方法的參數(shù)里，所以這里能拿到res。
      window.showLocation = function (res) {
        console.log(res)
        //執(zhí)行ajax回調(diào)
      }
    </script>
    <script src='http://api.map.baidu.com/geocoder/v2/?address=上海&callback=showLocation' type='text/javascript'></script>
  </body>
</html>

這個(gè)時(shí)候，html頁面的script src標(biāo)簽回去訪問api.map.baidu.com的服務(wù)端，由于script，img這種標(biāo)簽瀏覽器是不受xmlhttprequest限制的，可以隨意訪問，這個(gè)時(shí)候?qū)?yīng)的后端代碼取得address參數(shù)，最后根據(jù)雙方約定好的callback參數(shù)，返回一個(gè)被包裝后的json，即

showLocation({
    status: 0,
    result: {
        location: {
            lng: 121.4219317908279,
            lat: 31.361653367912695
        },
        precise: 1,
        confidence: 80,
        comprehension: 99,
        level: "道路"
    }
})

然后瀏覽器直接執(zhí)行了對(duì)應(yīng)的這個(gè)showLocation()… 等等，這個(gè)不就相當(dāng)于執(zhí)行了我們上面定義的window.showLocation方法并且傳入了我們需要的json返回嗎，那我們的ajax success方法里就可以得到這個(gè)返回類型了，并且沒有跨域，是不是很精妙。

CORS

CORS是一個(gè)W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）跨域資源共享 CORS 詳解。這個(gè)玩樣用于“破解”掉瀏覽器的限制，說是破解其實(shí)也是瀏覽器認(rèn)識(shí)到了一些頭部就放行了的意思，需要在http的response內(nèi)多設(shè)置幾個(gè)頭部

Access-Control-Allow-Origin:* 表明允許所有的origin（瀏覽器的html頁面路徑）訪問，而并非是同源的origin
Access-Control-Request-Method:* 表明允許所有的http request頭，訪問，因?yàn)闉g覽器在觸發(fā)如下幾個(gè)場(chǎng)景會(huì)在發(fā)送真正的數(shù)據(jù)前發(fā)送options這樣的預(yù)檢請(qǐng)求檢測(cè)，一旦預(yù)檢通過后才會(huì)發(fā)送真正的get或post數(shù)據(jù)請(qǐng)求，這個(gè)時(shí)候我們按照cors的設(shè)置就需要允許對(duì)應(yīng)的method訪問，觸發(fā)的幾種情況包括
1:請(qǐng)求的方法不是GET/HEAD/POST
2:POST請(qǐng)求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
3:請(qǐng)求設(shè)置了自定義的header字段等
Access-Control-Allow-Headers:* 設(shè)置所有header均可以被允許，這個(gè)配置聯(lián)通上述的request method options檢測(cè)一起使用，可以在需要自定義header的場(chǎng)景下使用
Access-Control-Allow-Credentials：true 這個(gè)參數(shù)只有當(dāng)需要跨域使用cookie傳遞時(shí)才需要設(shè)置為true，并且需要前端ajax配置使用xhrField:{withCredential:true}時(shí)才能傳遞cookie，另外safari和最新版本的chrome瀏覽器還需要在設(shè)置內(nèi)放開對(duì)應(yīng)限制，可參考我的秒殺課程,當(dāng)這個(gè)參數(shù)被設(shè)置成true時(shí)候Access-Control-Allow-Origin就不能設(shè)置為*，否則就變成任何origin域都能允許傳遞cookie了，可將其調(diào)整為前端origin字段傳什么我就用什么

若你使用的是nginx反向代理，則可以直接在nginx反向代理上配置

location /{
    proxy_pass http://backendserver;

    add_header Access-Control-Allow-Methods *;
    add_header Access-Control-Allow-Credentials true;
    add_header Access-Control-Allow-Origin $http_origin;
    add_header Access-Control-Allow-Headers *;

}

代理法

打破不同源的限制，我只要讓它同源就可以了，比如要我的靜態(tài)頁面是 http://a.com/index.html 動(dòng)態(tài)ajax請(qǐng)求訪問的是http://b.com/api/***

我只需要將對(duì)應(yīng)的服務(wù)部署在不同的機(jī)器上，然后使用一個(gè)公共的c.com的域名作為nginx反向代理的入口域名，在將靜態(tài)服務(wù)和動(dòng)態(tài)服務(wù)分別掛在后面的被代理局域網(wǎng)服務(wù)器內(nèi)，修改配置

server{
    listen:80;
    server_name: c.com;

    #靜態(tài)資源
    location /{
        proxy_pass http://localhost:8080/;
    }

    #ajax動(dòng)態(tài)請(qǐng)求
    location /api{
        proxy_pass http://localhost:8081/;

    }

}

這樣就變成同源了

寫在最后

第一：看完點(diǎn)贊，感謝您對(duì)作者的認(rèn)可；
...
第二：隨手轉(zhuǎn)發(fā)，分享知識(shí)，讓更多人學(xué)習(xí)到；
...
第三：記得點(diǎn)關(guān)注，每天更新的?。?！
...

向AI問一下細(xì)節(jié)

阿里P7架構(gòu)師是如何解決跨域問題的！你有遇到嗎？

一、跨域產(chǎn)生的條件

二、如何解決跨域問題

JSONP方式

CORS

代理法

寫在最后

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

阿里P7架構(gòu)師是如何解決跨域問題的！你有遇到嗎？

二、如何解決跨域問題