WEB 前端跨域解決方案

時間 2019-11-25

標籤 web 前端解決方案欄目 HTML 简体版

原文原文鏈接

跨域定義

廣義的定義：跨域是指一個域下的文檔或腳本試圖去請求另外一個域下的資源。javascript

1.) 資源跳轉：連接、重定向、表單提交 css

2.) 資源嵌入： <link>、<script>、<img>、<frame>等dom標籤，還有樣式中background:url()、@font-face()等文件外鏈html

3.) 腳本請求： js發起的ajax請求、dom和js對象的跨域操做等前端

同源策略

同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，若是缺乏了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即使兩個不一樣的域名指向同一個ip地址，也非同源。vue

同源策略限制如下幾種行爲：

1.) Cookie、LocalStorage 和 IndexDB 沒法讀取html5

2.) DOM 和 Js對象沒法得到 java

3.) AJAX 請求不能發送node

跨域解決方案

1）jsonp跨域

關於jsonp的原理把握一下幾點：
1）html標籤的src屬性沒有同源限制（支持跨域），瀏覽器解析script標籤時，會自動下載src屬性值（url）指向的資源；jquery

2）script標籤指向的資源文件被下載後，其中的內容會被當即執行；webpack

3）服務器端的程序會解析src屬性值中的url傳遞的參數，根據這些參數針對性返回一個/多個函數調用表達式，這些函數調用表達式的參數就是客戶端跨域想獲得的數據；

4）服務器生成、返回的文件中，表達式調用的函數是已經在本地提早定義好的，而參數就是但願從跨域服務器拿到的數據。字面的script標籤能夠，動態添加到dom樹中的script也能夠，後者更方便綁定事件。

5）只能實現get，也是他的弱點

實現：

// 服務端返回：
test({code:0,message:'成功'})

// 原生js
 <script>
    var script = document.createElement('script');
    script.type = 'text/javascript';
    // 傳參並指定回調執行函數爲callback
    script.src = 'http://www.chuchur.com/login?callback=test';
    document.head.appendChild(script);
    // 回調執行函數
    function test(res) {
        console.log(JSON.stringify(res));
    }
 </script>

//jquery ajax：
$.ajax({
    url: 'http://www.chuchur.com/login',
    type: 'get',
    dataType: 'jsonp',  // 請求方式爲jsonp
    jsonpCallback: "test",    // 自定義回調函數名
    data: {}
});

//vue.js
this.$http.jsonp('http://www.chuchur.com/login', {
    params: {},
    jsonp: 'test'
}).then((res) => {
    console.log(res); 
})

2）document.domain + iframe跨域

原理：
這種方案只限於主域相同，子域不一樣的狀況，其原理就是兩個頁面經過js強制設置window.domain 爲主域，這樣就實現了同域。

實現：

<!-- 父窗口 https://chuchur.com/a.html -->
<iframe id="iframe" src="https://b.chuchur.com/b.html"></iframe>
<script>
    document.domain = 'chuchur.com';
    var user = 'chuchur';
</script>
<!-- 子窗口 https://b.chuchur.com/b.html -->
<script>
    document.domain = 'chuchur.com';
    // 獲取父窗口中變量
    alert('從父窗口取得數據' + window.parent.user);
</script>

3）location.hash + iframe跨域
原理：
其原理就是經過URL傳值，而後監聽其hash值的變化，而後經過中間層作跳板，再利用父子窗口js parent 最終來訪問同域全部頁面對象。

域1: a.html ，域2:b.html ，域1:c.html 。

a.html，b.html不一樣域只能經過 hash傳值通信。

b.html，c.html也不一樣域也只能單項通信

a.html，c.html同域，因此c.html能夠經過parent 來訪問a.html 頁面對象

實現：
1.）a.html：(www.chuchur.com/a.html)

<iframe id="iframe" src="http://www.chuchur.org/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    // 向b.html傳hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#nick=chuchur';
    }, 1000);    
    // 開放給同域c.html的回調方法
    function test(res) {
        alert('數據來自c.html ---> ' + res);
    }
</script>

2.）b.html：(www.chuchur.org/b.html)

<iframe id="iframe" src="http://www.chuchur.com/c.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');
    // 監聽a.html傳來的hash值，再傳給c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>

3.）c.html：(www.chuchur.com/c.html)

<script>
    // 監聽b.html傳來的hash值
    window.onhashchange = function () {
        // 再經過操做同域a.html的js回調，將結果傳回
        window.parent.parent.test('你好: ' + location.hash.replace('#nick=', ''));
    };
</script>

4）window.name + iframe跨域

原理：
利用window.name特有屬性，name值在不一樣的頁面甚至不一樣域，當頁面從新加載後依然存在，而且支持很是長的值，約2MB。

實現：

// 1.）a.html：(www.chuchur.com/a.html)
var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');
    // 加載跨域頁面 ，先讓頁面的name執行賦值，
    iframe.src = url;
    // onload事件會觸發2次，第1次加載跨域頁，並留存數據於window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy頁)成功後，讀取同域window.name中數據
            test(iframe.contentWindow.name);
            destoryFrame();
        } else if (state === 0) {
            // 第1次onload(跨域頁)成功後，切換到同域代理頁面
            iframe.contentWindow.location = 'http://www.chuchur.com/b.html';
            state = 1;
        }
    };
    document.body.appendChild(iframe);
    // 獲取數據之後銷燬這個iframe，釋放內存；這也保證了安全（不被其餘域frame js訪問）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 請求跨域b頁面數據
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});
// 2.）proxy.html：(www.chuchur.com/proxy.html）,這個頁面能夠什麼都不寫，可是要保證能正常訪問

// 3.）b.html：(www.chuchur.org/b.html)
<script>
    window.name = '我是一個能夠很是長的變量';
</script>

5）postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，能夠解決如下方面的問題：

a.）頁面和其打開的新窗口的數據傳遞
b.）多窗口之間消息傳遞
c.）頁面與嵌套的iframe消息傳遞
d.）上面三個場景的跨域數據傳遞

用法： postMessage(data,origin)方法接受兩個參數

data： html5規範支持任意基本類型或可複製的對象，但部分瀏覽器只支持字符串，因此傳參時最好用JSON.stringify()序列化。

origin：協議+主機+端口號，也能夠設置爲"*"，表示能夠傳遞給任意窗口，若是要指定和當前窗口同源的話設置爲"/"。

實現：

<!-- 1.）a.html：(www.chuchur.com/a.html) -->
<iframe id="iframe" src="http://www.chuchur.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = { name: '邱秋'};
        // 向chuchur.org傳送跨域數據
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.chuchur.org');
    };

    // 接受chuchur.org返回數據
    window.addEventListener('message', function(e) {
        alert('我來自chuchur.org： ' + e.data);
    }, false);
</script>
<!-- 2.）b.html：(www.chuchur.org/b.html) -->
<script>
    // 接收chuchur.com的數據
    window.addEventListener('message', function(e) {
        alert('我來自chuchur.com ' + e.data);
        var data = JSON.parse(e.data);
        if (data) {
            data.nick = chuchur;
            // 處理後再發回chuchur.com
            window.parent.postMessage(JSON.stringify(data), 'http://www.chuchur.org');
        }
    }, false);
</script>

6）跨域資源共享（CORS）

原理：
普通跨域請求：只服務端設置Access-Control-Allow-Origin便可，前端無須設置。

帶cookie請求：先後端都須要設置字段，另外需注意：所帶cookie爲跨域請求接口所在域的cookie，而非當前頁。目前，全部瀏覽器都支持該功能(IE8+：IE8/9須要使用XDomainRequest對象來支持CORS）)，CORS也已經成爲主流的跨域解決方案。

實現：

//1）原生js
var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端設置是否帶cookie
xhr.withCredentials = true;
xhr.open('post', 'http://www.chuchur.com/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=chuchur');
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};
//2.）jQuery ajax
$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端設置是否帶cookie
   },
   crossDomain: true,   // 會讓請求頭中包含跨域的額外信息，但不會含cookie
    ...
});
//3.）vue框架在vue-resource封裝的ajax組件中加入如下代碼：
Vue.http.options.credentials = true

//後臺服務端
//java
/*
 * 導入包：import javax.servlet.http.HttpServletResponse;
 * 接口參數中定義：HttpServletResponse response
 */
response.setHeader("Access-Control-Allow-Origin", "http://www.chuchur.com");  // 如有端口需寫全（協議+域名+端口）
response.setHeader("Access-Control-Allow-Credentials", "true");

//node
var server = http.createServer(); 
server.on('request', function(req, res) {
    var postData = '';

    // 數據塊接收中
    req.addListener('data', function(chunk) {
        postData += chunk;
    });

    // 數據接收完畢
    req.addListener('end', function() {
        postData = qs.parse(postData);

        // 跨域後臺設置
        res.writeHead(200, {
            'Access-Control-Allow-Credentials': 'true',     // 後端容許發送Cookie
            'Access-Control-Allow-Origin': 'http://www.chuchur.com',    // 容許訪問的域（協議+域名+端口）
            'Set-Cookie': 'l=abcdef;Path=/;Domain=www.chuchur.com;HttpOnly'   // HttpOnly:腳本沒法讀取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();
    });
});
server.listen('3000');

7）nginx反向代理跨域

瀏覽器跨域訪問js、css、img等常規靜態資源被同源策略許可，但iconfont字體文件(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜態資源服務器中加入如下配置。

location / { add_header Access-Control-Allow-Origin *; }

原理：
經過nginx代理一個同域不一樣端口的跳板機，反向代理要跨域的域名，這樣能夠修改cookie裏面的domain信息實現跨域

實現：

// nginx具體配置：
server {
    listen       80;
    server_name  www.chuchur.com;
    location / {
        proxy_pass   http://www.chuchur.org;  #反向代理
        proxy_cookie_domain www.chuchur.org www.chuchur.com; #修改cookie裏域名
        index  index.html index.htm;

        # 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啓用
        add_header Access-Control-Allow-Origin http://www.chuchur.com;  #當前端只跨域不帶cookie時，可爲*
        add_header Access-Control-Allow-Credentials true;
    }
}

前端實現

var xhr = new XMLHttpRequest();
// 前端開關：瀏覽器是否讀寫cookie
xhr.withCredentials = true;
// 訪問nginx中的代理服務器
xhr.open('get', 'http://www.chuchur.com/?user=chuchur', true);
xhr.send();

// node
var http = require('http')；
var server = http.createServer();
var qs = require('querystring');
server.on('request', function(req, res) {
    var params = qs.parse(req.url.substring(2));
    // 向前臺寫cookie
    res.writeHead(200, {
        'Set-Cookie': 'l=abcdef;Path=/;Domain=www.chuchur.org;HttpOnly'   // HttpOnly:腳本沒法讀取
    });
    res.write(JSON.stringify(params));
    res.end();
});
server.listen('8080');

8）Nodejs中間件代理跨域

原理同nignx代理跨域相似，都是經過代理服務器實現數據轉發

實現：

//1）利用中間件http-proxy-middleware實現
var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/', proxy({
    // 代理跨域目標接口
    target: 'http://www.chuchur.org:',
    changeOrigin: true,
    // 修改響應頭信息，實現跨域並容許帶cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', 'http://www.chuchur.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },

    // 修改響應信息中的cookie域名
    cookieDomainRewrite: 'www.chuchur.com'  // 能夠爲false，表示不修改
}));

app.listen(3000);
//2）利用中間件 webpack-dev-server實現
//webpack.config.js部分配置：
module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.chuchur.org',  // 代理跨域目標接口
            changeOrigin: true,
            cookieDomainRewrite: 'www.chuchur.com'  // 能夠爲false，表示不修改
        }],
        noInfo: true
    }
}

9）WebSocket協議跨域

WebSocket protocol是HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通訊，同時容許跨域通信，是server push技術的一種很好的實現。原生WebSocket API使用起來不太方便，咱們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。

實現：
1.）前端代碼：

<div>user input：<input type="text"></div>
<script src="./socket.io.js"></script>
<script>
var socket = io('http://www.chuchur.org');

// 鏈接成功處理
socket.on('connect', function() {
    // 監聽服務端消息
    socket.on('message', function(msg) {
        console.log('來自服務器的消息： ' + msg); 
    });

    // 監聽服務端關閉
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

2.）Nodejs socket後臺：

var http = require('http');
var socket = require('socket.io');

// 啓http服務
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 監聽socket鏈接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('哈哈：' + msg);
        console.log('來自客服端的消息': ---> ' + msg);
    });

    // 斷開處理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});

以上9種方式都能實現跨域數據傳遞，用的最多的仍是第六種跨域資源共享（CORS），在先後端分離開發模式最多見。第七種和第八種中間件代理實現方式則是在基於node開發種經常使用的

其中第二，3、4、五種方案，利用ifame 和 postMessage 則能夠實現不一樣窗口之間的數據通信。

【完】