九種前端跨域處理方案

語言: CN / TW / HK

目錄

    • 二、跨域資源共享(CORS)
    • 三、Nginx 反向代理解決跨域問題
      • nginx配置解決iconfont跨域
      • nginx反向代理接口跨域
    • 四、nodejs中間件代理跨域
    • 五、document.domain + iframe跨域
    • 六、location.hash + iframe跨域
    • 七、window.name + iframe解決跨域
    • 八、postMessage通信跨域

同源策略

  • 跨域:瀏覽器允許向服務器發送跨域請求,從而克服Ajax只能同源使用的限制。

  • 同源策略:如果兩個頁面的協議,域名,端口都相同,則兩個頁面具有相同的源。

    同源策略是瀏覽器的一個安全功能,不同源的客户端腳本在沒有明確授權的情況下,不能讀寫對方資源。這是一個用於隔離潛在惡意文件的重要安全機制。

不受同源策略限制的

  1. 頁面中的鏈接,重定向以及表單提交是不會受到同源策略限制的。

  2. 跨域資源的引入是可以的。但是js不能讀寫加載的內容。如嵌入到頁面中的 <script src="..."></script>,<img>,<link>,<iframe> 等。

受到限制的

  1. Cookie、LocalStorage 和 IndexDB 無法讀取
  2. DOM和JS對象無法獲得
  3. AJAX 請求不能發送

跨域解決方案

一、JSONP跨域

  • jsonp的核心原理就是:目標頁面回調本地頁面的方法,並帶入參數
  • 服務器端實現 JSONP 接口的步驟
    <script>
    
  • jsonp的缺點:只能發送get一種請求。

1、原生JS實現

通過script標籤src屬性,發送帶有callback參數的GET請求,服務端將接口返回數據拼湊到callback函數中,返回給瀏覽器,瀏覽器解析執行,從而前端拿到callback函數返回的數據。

<script>
    function getData(data){
        console.log(data)
    }
</script>
<script src="http://127.0.0.1:3000/web?cb=getData"></script>

後端nodejs代碼

主要用來模擬服務器

攜帶參數必須是字符串

const express=require('express')
const router=express.Router()
router.get('/web',(req,res)=>{
    let {cb}=req.query
    console.log(req.query)
    var data = {
        name: 'xtt',
        age: 18,
        gender:'女孩子'
    }
    // 攜帶參數必須是字符串
    res.send(`${cb}(${JSON.stringify(data)})`)
    router.get('/que',(req,res)=>{
        res.send(`${req.query.cb}('dd')`)
    })
})
module.exports=router

2、jquery Ajax實現

以jquery來發起jsonp請求

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
    let url = 'http://127.0.0.1:3000/que?cb=getData'
    $.ajax({
        method: 'GET',
        url,
        dataType: 'jsonp',
        success: (res) => {
            console.log(res)
        }
    })
</script>

3、Vue axios實現

handleCallback({"success": true, "user": "admin"})
this.$http = axios;
this.$http.jsonp('http://127.0.0.1:3000/que?cb=getData', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

二、跨域資源共享(CORS)

  • CORS是一個W3C標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。
  • 它允許瀏覽器向跨源服務器,發出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。
  • CORS需要瀏覽器和服務器同時支持。
    • 目前,所有主流瀏覽器都支持該功能,IE10以下不支持。
    • 瀏覽器將CORS跨域請求分為:簡單請求、非簡單請求。

簡單請求與非簡單請求

簡單請求

瀏覽器在發送跨域請求的時候,會先判斷下是簡單請求還是非簡單請求,如果是簡單請求,就先執行服務端程序,然後瀏覽器才會判斷是否跨域。

同時滿足以下的兩個條件,就屬於簡單請求。瀏覽器對這兩種的處理,是不一樣的。

  1. 請求方式:get/post/head其中一種
  2. 請求頭設置:
    • Accept
    • Accept-Language
    • Content-Type:application/x-www-form-urlencoded、multipart/form-data、text/plain( 只限於三個值中的一個)

詳細描述

對於簡單請求,瀏覽器直接發出CORS請求。具體來説,就是在頭信息之中,增加一個Origin字段。

舉例:

  1. 發起請求

  2. 自動在頭信息之中,添加一個Origin字段。

    GET /cors HTTP/1.1
    Origin: http://127.0.0.1:8080
    Host: api.alice.com
    Accept-Language: en-US
    Connection: keep-alive
    User-Agent: Mozilla/5.0...

    Origin:本次請求來自哪個域(協議 + 域名 + 端口)。服務器根據這個值,決定是否同意這次請求。

  3. 服務器判斷此次請求Origin源

    • 不在許可範圍內:服務器會返回一個正常的 HTTP 迴應。
      • 瀏覽器發現,這個迴應的頭信息沒有包含Access-Control-Allow-Origin字段(詳見下文),就知道出錯了,從而拋出一個錯誤,被 請求的異常 回調函數捕獲。

        注意,這種錯誤無法通過狀態碼識別,因為 HTTP 迴應的狀態碼有可能是200。

    • 在許可範圍內:服務器返回的響應,會多出幾個頭信息字段。
      • 有三個與 CORS 請求相關的字段,都以Access-Control-開頭
        Access-Control-Allow-Origin: http://api.bob.com
        Access-Control-Allow-Credentials: true
        Access-Control-Expose-Headers: FooBar
        Content-Type: text/html; charset=utf-8
  4. Access-Control解釋

    1. Access-Control-Allow-Origin:必須的

      它的值要麼是請求時Origin字段的值,要麼是一個*,表示接受任意域名的請求。

    2. Access-Control-Allow-Credentials:可選

      布爾值,表示是否允許發送 Cookie。默認情況下,Cookie 不包括在 CORS 請求之中(為了降低 CSRF 攻擊的風險。)。設為true,即表示服務器明確許可,瀏覽器可以把 Cookie 包含在請求中,一起發給服務器。這個值也只能設為true,如果服務器不要瀏覽器發送 Cookie,不發送該字段即可。

    3. Access-Control-Expose-Headers:可選

      CORS 請求時,XMLHttpRequest對象的getResponseHeader()方法只能拿到6個服務器返回的基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必須在Access-Control-Expose-Headers裏面指定。上面的例子指定,getResponseHeader('FooBar')可以返回FooBar字段的值。

非簡單請求

對服務器提出特殊要求的請求,比如請求方法是PUT或DELETE,或者Content-Type字段的類型是application/json。

預檢請求

  1. 非簡單請求的 CORS 請求,會在正式通信之前,增加一次 HTTP 查詢請求,稱為“預檢”請求(preflight)。
  2. 瀏覽器先詢問服務器,當前網頁所在的域名是否在服務器的許可名單之中,以及可以使用哪些 HTTP 方法和頭信息字段。
  3. 只有得到肯定答覆,瀏覽器才會發出正式的XMLHttpRequest請求,否則就報錯。
  4. 這是為了防止這些新增的請求,對傳統的沒有 CORS 支持的服務器形成壓力,給服務器一個提前拒絕的機會,這樣可以防止服務器收到大量DELETE和PUT請求,這些傳統的表單不可能跨域發出的請求

舉例

  1. 自動發出一個“預檢”請求,要求服務器確認可以這樣請求。下面是這個“預檢”請求的 HTTP 頭信息:

    OPTIONS /cors HTTP/1.1
    Origin: http://api.bob.com
    Access-Control-Request-Method: PUT
    Access-Control-Request-Headers: X-Custom-Header
    Host: api.alice.com
    Accept-Language: en-US
    Connection: keep-alive
    User-Agent: Mozilla/5.0...

    兩個特殊字段:

    • Access-Control-Request-Method必須的

      用來列出瀏覽器的 CORS 請求會用到哪些 HTTP 方法,上例是PUT。

    • Access-Control-Request-Headers

      該字段是一個逗號分隔的字符串,指定瀏覽器 CORS 請求會額外發送的頭信息字段。

    服務器收到“預檢”請求以後,檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以後,確認允許跨源請求,就可以做出迴應

  2. 預檢請求的迴應:

    服務器收到"預檢"請求以後,檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以後,確認允許跨源請求,就可以做出迴應。

HTTP迴應中,除了關鍵的是Access-Control-Allow-Origin字段,其他CORS相關字段如下:

  • Access-Control-Allow-Methods:必選

    它的值是逗號分隔的一個字符串,表明服務器支持的所有跨域請求的方法。注意,返回的是所有支持的方法,而不單是瀏覽器請求的那個方法。這是為了避免多次"預檢"請求。

  • Access-Control-Allow-Headers

    如果瀏覽器請求包括Access-Control-Request-Headers字段,則Access-Control-Allow-Headers字段是必需的。它也是一個逗號分隔的字符串,表明服務器支持的所有頭信息字段,不限於瀏覽器在"預檢"中請求的字段。

  • Access-Control-Allow-Credentials:可選

    該字段與簡單請求時的含義相同。

  • Access-Control-Max-Age:可選

    用來指定本次預檢請求的有效期,單位為秒。

CORS跨域

1)前端設置

let xhr;
try {
    xhr=new XMLHttpRequest();   
} catch (error) {
     xhr=new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('post','http://localhost:3000/login',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.send('name=111&age=12');
xhr.onreadystatechange=function(){
    if(xhr.readyState==4){
        let reg=/^2\d{2}/
        if(reg.test(xhr.status)){
            console.log(JSON.parse(xhr.response))
        }
    }
}

nodejs代碼

在Express中通過第3方中間件來完成cors跨域解決

使用步驟分為如下 3 步:

  1. 運行 npm install cors 安裝中間件
  2. 使用 const cors = require('cors') 導入中間件
  3. 在路由之前調用 app.use(cors()) 配置中間件
const express=require('express')
const cors=require('cors')
const app=express()
app.listen(3000)
const allowHosts=[
    'http://localhost:5000',
    'http://localhost:2000'
]
app.use(cors())
app.use((req,res,next)=>{
    let hst =req.header.origin
    if(allowHosts.includes(hst)){
        next()
    }else{
        return res.send({
            code:404,
            msg:'地址不對'
        })
    }
})
app.get('/login',(req,res)=>{
    res.send('登陸')
})

三、Nginx 反向代理解決跨域問題

正向代理和反向代理

提到代理,肯定要説一下這兩個的區別。

  • 舉個正向代理的例子

    我打球累了走不動了,找看球的小朋友幫我去旁邊的商店買瓶水。商店老闆是不知道到底是誰需要喝水的,隱藏了客户端。當然,小朋友可以吿訴老闆就是那個打球像蔡徐坤的人要喝水。還有,VPN 就是正向代理。

  • 反向代理的例子

    我打球累了,找看球的小朋友要瓶水喝(當然我肯定會給錢的:D)。我不需要知道小朋友的水是從旁邊的商店還是兩公里外的超市買的。隱藏了服務端。還有,我們連好了 VPN 訪問谷歌的時候,瀏覽的那些頁面,我們是不會知道具體是哪台服務器的資源。

nginx配置解決iconfont跨域

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

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

nginx反向代理接口跨域

跨域問題:同源策略僅是針對瀏覽器的安全策略。服務器端調用HTTP接口只是使用 HTTP協議 ,不需要同源策略,也就不存在跨域問題。

實現思路:通過Nginx配置一個代理服務器域名與domain1相同,端口不同)做跳板機,反向代理訪問domain2接口,並且可以順便修改cookie中domain信息,方便當前域cookie寫入,實現跨域訪問。

nginx具體配置

#proxy服務器
server {
    listen       81;
    server_name  www.domain1.com;

    location / {
        proxy_pass   http://www.yp2.com:8080;  #反向代理
        proxy_cookie_domain www.yp2.com www.yp1.com; #修改cookie裏域名
        index  index.html index.htm;

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

四、nodejs中間件代理跨域

node中間件實現跨域代理,原理大致與nginx相同,都是通過啟一個代理服務器,實現數據的轉發,也可以通過設置cookieDomainRewrite參數修改響應頭中cookie中域名,實現當前域的cookie寫入,方便接口登錄認證。

1、nodejs服務器代理

使用node + express + http-proxy-middleware搭建一個proxy服務器。

npm i express htttp-proxy-middleware
const express=require('express')
const app=express()
app.listen(5000)
const httpProxyMiddleware=require('http-proxy-middleware')
// 服務器代理  ---接口中間層 代理層
app.use('/api' ,httpProxyMiddleware.createProxyMiddleware({
    // 代理的地址
    target:'http://localhost:8989',
    // 默認false不修改。修改代理請求是他的主機名
    changeOrigin:true,
    // 修改響應頭信息,實現跨域並允許帶cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', 'http://localhost:5000');
        res.header('Access-Control-Allow-Credentials', 'true');
    },

    // 匹配規則
    pathRewrite:{
        // 訪問路徑 映射到 目標服務器中的路徑
        '^/v1/api':'/'
    }
}))

2、vue框架的跨域

vue中實現開發環境的時的反向代理進行跨域解決,在項目根目錄下面創建一個vue.config.js文件,寫下如下代碼

vue.config.js部分配置:

module.exports={
    // 指定服務器模塊
    devServer:{
        // 代理
        proxy:{
            '/v1/api':{
                // 目標地址
                target:'http://localhost:3000',
                changeOrigin:true,
                pathRewrite:{
                    '/v1/api':'/api'
                }
            }
        }
    }
}

五、document.domain + iframe跨域

前提條件

這兩個域名必須屬於同一個一級域名!而且所用的協議,端口都要一致,否則無法利用document.domain進行跨域。

Javascript出於對安全性的考慮,而禁止兩個或者多個不同域的頁面進行互相操作。

而相同域的頁面在相互操作的時候不會有任何問題。

alert(document.domain = "baidu.com");     //"baidu.com"
alert(document.domain = "www.baidu.com"); //"www.baidu.com"

舉例

1)父窗口:( http://father.baidu.com/a.html )

<iframe id="iframe" src="http://child.baidu.com/b.html"></iframe>
<script>
    document.domain = 'baidu.com';
    var user = 'admin';
</script>

預覽

1)子窗口:( http://child.baidu.com/b.html )

<script>
    document.domain = 'baidu.com';
    // 獲取父窗口中變量
    console.log('get js data from parent ---> ' + window.parent.user);
</script>

六、location.hash + iframe跨域

hash 屬性是一個可讀可寫的字符串,該字符串是 URL 的錨部分(從 # 號開始的部分)。

實現原理

  • a想要與b跨域相互通信,通過中間頁c來實現。
  • 三個頁面,不同域之間利用iframe的location.hash傳值,相同域之間直接js訪問來通信。
  • 利用location.hash傳值,創建定時器,堅持hash的變化,執行相應的操作。
    下面我們來完成一個案例:

具體實現

  • A域:a.html -> B域:b.html -> A域:c.html
  • a與b不同域只能通過hash值單向通信,b與c也不同域也只能單向通信,但c與a同域,所以c可通過parent.parent訪問a頁面所有對象。

1)a.html:( http://www.baidu1.com/a.html )

<iframe id="iframe" src="http://www.baidu2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

    // 向b.html傳hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#user=admin';
    }, 1000);
    
    // 開放給同域c.html的回調方法
    function onCallback(res) {
        alert('data from c.html ---> ' + res);
    }
</script>

2)b.html:( http://www.baidu2.com/b.html )

<iframe id="iframe" src="http://www.baidu1.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:( http://www.baidu1.com/c.html )

<script>
    // 監聽b.html傳來的hash值
    window.onhashchange = function () {
        // 再通過操作同域a.html的js回調,將結果傳回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>

優缺點

  • location.hash + iframe跨域的優點:

    1. 可以解決域名完全不同的跨域
    2. 可以實現雙向通訊
  • location.hash + iframe跨域的缺點:

    1. location.hash會直接暴露在URL裏,並且在一些瀏覽器裏會產生歷史記錄,數據安全性不高也影響用户體驗
    2. 另外由於URL大小的限制,支持傳遞的數據量也不大。

七、window.name + iframe解決跨域

window.name屬性的獨特之處:只要在一個window下,無論url怎麼變化,只要設置好了window.name,那麼後續就一直都不會改變。同理,在iframe中,即使url在變化,iframe中的window.name也是一個固定的值,利用這個,我們就可以實現跨域了(2MB)。

舉例

test1.html

<body>
  <h2>test1頁面</h2>
  <iframe src="http://192.168.0.1/php_demo/test2.html" frameborder="1"></iframe>
  <script>
    var ifr = document.querySelector('iframe')
    ifr.style.display = 'none'
    var flag = 0;
    ifr.onload = function () {
        console.log('跨域獲取數據', ifr.contentWindow.name);
        ifr.contentWindow.close();
    }
  </script>
</body>

test2.html

<body>
  <h2>test2頁面</h2>
  <script>
    var person = {
      name: '大鵬_yp',
      age: 24,
      school: 'lngydx'
    }
    window.name = JSON.stringify(person)
  </script>
</body>

通過iframe的src屬性由外域轉向本地域,跨域數據即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制,但同時它又是安全操作。

八、postMessage通信跨域

PWA漸進式web應用

  • 在HTML5中新增了postMessage方法,postMessage可以實現跨文檔消息傳輸(Cross Document Messaging)
  • 該方法可以通過綁定window的message事件來監聽發送跨文檔消息傳輸內容。
  1. 它可用於解決以下方面的問題:

    a. 頁面和其打開的新窗口的數據傳遞

    b. 多窗口之間消息傳遞

    c. 頁面與嵌套的iframe消息傳遞

    d. 上面三個場景的跨域數據傳遞

  2. postMessage用法:

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

    參數説明:

    • data: html5規範支持任意基本類型或可複製的對象,但部分瀏覽器只支持字符串,所以傳參時最好用JSON.stringify()序列化。
    • origin: 協議+主機+端口號,也可以設置為"*",表示可以傳遞給任意窗口,如果要指定和當前窗口同源的話設置為"/"。

舉例

<iframe id="iframe" src="http://www.baidu2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2傳送跨域數據
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.baidu2.com');
    };

    // 接受baidu2返回數據
    window.addEventListener('message', function(e) {
        alert('data from baidu2 ---> ' + e.data);
    }, false);
</script>

2)b.html:( http://www.baidu2.com/b.html )

<script>
    // 接收baidu1的數據
    window.addEventListener('message', function(e) {
        alert('data from baidu1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 處理後再發回baidu1
            window.parent.postMessage(JSON.stringify(data), 'http://www.baidu1.com');
        }
    }, false);
</script>

九、WebSocket協議跨域

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

WebSocket 如何工作

Web瀏覽器和服務器都必須實現 WebSockets 協議來建立和維護連接。由於 WebSockets 連接長期存在,與典型的HTTP連接不同,對服務器有重要的影響。

基於多線程或多進程的服務器無法適用於 WebSockets,因為它旨在打開連接,儘可能快地處理請求,然後關閉連接。任何實際的 WebSockets 服務器端實現都需要一個異步服務器。

案例

1)前端代碼:

<div>user input:<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.baidu2.com:8080');

// 連接成功處理
socket.on('connect', function() {
    // 監聽服務端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + 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('hello:' + msg);
        console.log('data from client: ---> ' + msg);
    });

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