九種前端跨域處理方案

語言: 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.'); 
    });
});