經常使用的解決跨域的幾種方法

時間 2019-11-07

標籤經常使用解決幾種方法简体版

原文原文鏈接

對於跨域,每個前端同窗都不陌生,關於如何解決跨域也有不少種方法,這裏我就總結一下什麼是跨域、爲何會跨域以及我經常使用的解決跨域的幾種方式。html

跨域

瀏覽器同源策略: 瀏覽器限制了從同一個源加載的文檔或腳本如何與來自另外一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。
同源策略的具體表現:
1)http請求不能向不一樣源的服務器發起HTTP請求
2)非同源的網頁不能共享Cookie、LocalStorage、IndexDB
3)禁止對不一樣源頁面的DOM進行操做。主要場景是iframe跨域的狀況,不一樣域名的iframe限制相互訪問
同源: 請求URL地址中的協議、域名及端口號都相同,只要有一個不相同就是跨域。
例子:
域名: http://www.example.com
跨域請求:
https://www.example.com //協議不一樣
http://api.example.com //域名不一樣
http://www.example.com:8080 //端口號不一樣前端

解決跨域的經常使用幾種方案

解決方案:
1)jsonp
2)nginx反向代理
3)配置vue-cli生成的文件實現代理
4)後端設置CORS來解決跨域
注: 2、三兩種都是服務器代理,由於跨域是瀏覽器的跨域限制,可是服務器不存在跨域問題,因此能夠由服務器請求所要訪問的資源而後再返回給客戶端vue

JSONP

jsonp實現原理: <script>標籤不受瀏覽器同源策略的影響,容許跨域引用資源。所以能夠經過動態建立script標籤,而後利用src屬性進行跨域。
JSONP實現方式: 動態建立script標籤,經過回調函數處理請求結果
JSONP的優勢:
1)能夠跨域
2)兼容性好
JSONP的缺點:
1)只能支持GET請求,JSONP在調用失敗時不會返回各類HTTP狀態碼
2)安全性。若是提供JSONP的服務被人控制,那麼全部調用這個JSONP的網站都存在漏洞。
下面是經過JSONP調用百度搜索的例子:nginx

//HTML
<div class="wrap">
        <input type="text">
        <ul></ul>
</div>
//JS
let inpEle = document.querySelector('input');
    let ulEle = document.querySelector('ul');
    let interval = 0;

    function searchData(data) {
        if (data.g) {
            let result = data.g;
            let fragment = document.createDocumentFragment();
            let html = '';
            result.forEach( (item) => {
                html += `<li><a target="_blank" href="https://www.baidu.com/s?wd=${item.q}">${item.q}</a></li>`;
            } )
            ulEle.innerHTML = html;
        } else {
            ulEle.innerHTML = '';
        }
    }

    let scriptEle = null;
    inpEle.oninput = search;
    function search() {
        let val = inpEle.value;
        let now = new Date().getTime();

        if (now - interval > 300) {
            if (scriptEle) {
                scriptEle.remove();
            }
            scriptEle = document.createElement('script');
            // wd後面接的是關鍵字,cb後面接的回調函數的名稱
            let url = 'https://www.baidu.com/sugrec?ie=utf-8&json=1&from=pc_web&prod=pc&wd='+ val + '&req=2&cb=searchData'
            scriptEle.src = url;
            document.body.appendChild(scriptEle);
        } 
    }

nginx反向代理

具體配置:
1)安裝nginx: http://nginx.org/en/download.... ,在其中選擇要安裝的版本,安裝完成後解壓
2)配置要被代理的服務:
在nginx-1.16.1 ==> conf ==> nginx.conf裏進行配置(代碼中找到server在裏面添加代理便可):web

server{
       listen               80; //監聽的端口
       server_name          localhost; // 在瀏覽器訪問的host-name,根據這個來判斷要代理到什麼地方
        //    要代理的內容

// 第一步(能夠不用)  進行反向代理,用localhost:80來代理http://127.0.0.1:8081的請求,能夠根據本身起的本地服務器來進行修改
            location / {
                proxy_pass  http://127.0.0.1:8081;
            }

            // 第二步  接口代理,在/api的前面添加添加上指定的域名
            location /api {
                proxy_pass http://1.1.1.1:8080;  // 將/api的接口反向代理到這個服務器上,從而實現了跨域
            }
   }

注:第一步是須要本地用編輯器起一個服務器,而後nginx作反向代理,從而實如今80端口下,訪問非80端口的頁面,這個配置完成後,瀏覽器的訪問地址應該改成 localhost/index.html ；如果不想這麼麻煩,能夠在先將nginx-1.16.1 ==> html下的頁面刪掉,而後將代碼移動到該位置便可,訪問的地址爲 http://localhost/index.html
3)啓動nginx.exevue-cli