一文詳解最常見的六種跨域解決方案

更新時間：2023年04月23日 11:28:05 作者：China_YF

跨域問題的本質(zhì)是瀏覽器為了保證用戶的一種安全攔截機制,想要解決跨域問題,只需要告訴瀏覽器"我是自己人,不要攔我"就行,下面這篇文章主要給大家介紹了關(guān)于最常見的六種跨域解決方案的相關(guān)資料,需要的朋友可以參考下

前言：什么是跨域？

跨域就是當(dāng)在頁面上發(fā)送ajax請求時，由于瀏覽器同源策略的限制，要求當(dāng)前頁面和服務(wù)端必須同源，也就是協(xié)議、域名和端口號必須一致。

如果協(xié)議、域名和端口號中有其中一個不一致，則瀏覽器視為跨域，進行攔截。

1、JSONP方式解決跨域：

jsonp的原理就是利用了script標(biāo)簽不受瀏覽器同源策略的限制，然后和后端一起配合來解決跨域問題的。

具體的實現(xiàn)就是在客戶端創(chuàng)建一個script標(biāo)簽，然后把請求后端的接口拼接一個回調(diào)函數(shù)名稱作為參數(shù)傳給后端，并且賦值給script標(biāo)簽的src屬性，然后把script標(biāo)簽添加到body中，當(dāng)后端接收到客戶端的請求時，會解析得到回調(diào)函數(shù)名稱，然后把數(shù)據(jù)和回調(diào)函數(shù)名稱拼接成函數(shù)調(diào)用的形式返回，客戶端解析后會調(diào)用定義好的回調(diào)函數(shù)，然后在回調(diào)函數(shù)中就可以獲取到后端返回的數(shù)據(jù)了。

頁面中可能會存在多個jsonp，所以可以封裝一個jsonp方法，客戶端代碼如下：

<script>
    // 封裝一個jsonp函數(shù)
    function jsonp({url, params, callback}) {
        return new Promise((resolve, reject) => {
            // 定義回調(diào)函數(shù)
            window[callback] = function(data) {
                resolve(data)
            }
          
            const script = document.createElement('script') // 創(chuàng)建script標(biāo)簽
            params = {...params, callback}
            const arr = []
            for(const key in params) {
                if(params.hasOwnProperty(key)) { // 判斷當(dāng)前key是否是params對象自身的屬性，有可能會是原型上的屬性，所以需要判斷一下
                    arr.push(`${key}=${params[key]}`)
                }
            }
            url += `?${arr.join('&')}` // 拼接參數(shù)
            script.async = true
            script.src = url
            document.body.appendChild(script)
            script.onload = () => {
                document.body.removeChild(script)
            }
        })
    }
	// 使用jsonp
    jsonp({
        url: 'http://127.0.0.1:8081/user',
        params:{id: '1'},
        callback: 'getUserData'
    }).then(res => {
        console.log('res:', res)
    })
</script>

服務(wù)端代碼如下(nodeJS)：

const http = require('http')
const url = require('url')

// 創(chuàng)建server
const server = http.createServer()
// 監(jiān)聽http請求
server.on('request', (req, res) => {
    // 獲取客戶端傳來的回調(diào)函數(shù)名稱
    const {callback} = url.parse(req.url, true).query
    const user = { // 模擬返回數(shù)據(jù)
        id: 1, 
        name: 'zhangsan',
        age: 12
    }
    // 把數(shù)據(jù)和回調(diào)函數(shù)名稱拼接成函數(shù)調(diào)用的方式返回
    const result = `${callback}(${JSON.stringify(user)})`
    res.end(result)
})

// 設(shè)置監(jiān)聽端口
server.listen(8081, function() {
    console.log('server is running on 8081 port！')
})

jsonp的優(yōu)點就是兼容性好，可以解決主流瀏覽器的跨域問題，缺點是僅支持GET請求，不安全，可能遭受xss攻擊。

2、CORS方式解決跨域：

cors是跨域資源共享，是一種基于 HTTP 頭的機制，該機制通過允許服務(wù)器標(biāo)示除了它自己以外的其它 origin（域，協(xié)議和端口），使得瀏覽器允許這些 origin 訪問加載自己的資源。服務(wù)端設(shè)置了Access-Control-Allow-Origin就開啟了CORS，所以這種方式只要后端實現(xiàn)了CORS，就解決跨域問題，前端不需要配置。

服務(wù)端設(shè)置Access-Control-Allow-Origin響應(yīng)頭即可，服務(wù)端代碼如下：

const http = require('http')
const url = require('url')
// 創(chuàng)建server
const server = http.createServer()
// 定義跨域訪問白名單
const authOrigin = ['http://127.0.0.1:5500']

// 監(jiān)聽http請求
server.on('request', (req, res) => {
    const user = { // 模擬返回數(shù)據(jù)
        id: 1, 
        name: 'zhangsan',
        age: 12
    }
    const origin = req.headers.origin
    if(authOrigin.includes(origin)) {
        // 添加響應(yīng)頭，實現(xiàn)cors
        // res.setHeader('Access-Control-Allow-Origin', '*') // 允許所有的地址跨域訪問
        res.setHeader('Access-Control-Allow-Origin', origin) // 只有白名單中的地址才可以跨域訪問
    }
    res.end(JSON.stringify(user))
})

// 設(shè)置監(jiān)聽端口
server.listen(8081, function() {
    console.log('server is running on 8081 port！')
})

當(dāng)客戶端訪問時服務(wù)端接口時，就可以看到響應(yīng)頭中服務(wù)端配置的Access-Control-Allow-Origin：

CORS方式解決跨域問題比較常用，只需要后端配置響應(yīng)頭Access-Control-Allow-Origin，前端無需配置，實現(xiàn)簡單。

3、搭建Node代理服務(wù)器解決跨域：

因為同源策略是瀏覽器限制的，所以服務(wù)端請求服務(wù)器是不受瀏覽器同源策略的限制的，因此我們可以搭建一個自己的node服務(wù)器來代理訪問服務(wù)器。

大概的流程就是：我們在客戶端請求自己的node代理服務(wù)器，然后在node代理服務(wù)器中轉(zhuǎn)發(fā)客戶端的請求訪問服務(wù)器，服務(wù)器處理請求后給代理服務(wù)器響應(yīng)數(shù)據(jù)，然后在代理服務(wù)器中把服務(wù)器響應(yīng)的數(shù)據(jù)再返回給客戶端。客戶端和自己搭建的代理服務(wù)器之間也存在跨域問題，所以需要在代理服務(wù)器中設(shè)置CORS。

基本的工作流程如下：

客戶端代碼如下：

<!-- 引入axios發(fā)送請求 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    // 簡單封裝一個axios向代理服務(wù)器發(fā)送請求
    function proxyAxios(data) {
        return axios({
            url: 'http://localhost:8081/proxyApi', // 請求自己搭建的node代理服務(wù)器的地址
            method: 'POST',
            headers: { 'content-type': 'application/x-www-form-urlencoded' },
            data
        })
    }

    // 使用node代理服務(wù)器向服務(wù)器發(fā)送請求
    proxyAxios({
        url: 'https://class.imooc.com/getadver',// 需要代理訪問真實服務(wù)器的url
        method: 'GET',
    }).then(res => {
        console.log('res:', res)
    }).catch(err => {
        console.log(err)
    })
</script>

node服務(wù)器代碼如下：

/**通過nodeJS搭建自己的代理服務(wù)器來解決跨域問題 */
const axios = require('axios')
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
// 使用第三方插件
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())

// 監(jiān)聽post請求,處理代理接口
app.post('/proxyApi', (req, res) => {
    const {body} = req
	// 獲取post請求的請求參數(shù)
    let reqParams = {}
	  for(const key in body) {
        reqParams = JSON.parse(key) // 獲取到請求參數(shù)
    }

    // 設(shè)置響應(yīng)頭
    // 代理服務(wù)器設(shè)置CORS，允許跨域訪問
    res.setHeader('Access-Control-Allow-Origin', '*') 
    res.setHeader('Access-Control-Allow-Methods', '*') // 允許所有的請求方式

    const {url, method = "GET", ...resConfig} = reqParams || {}
     // node代理請求服務(wù)器
     axios({
        url,
        method,
        ...resConfig
      }).then(result => {
        const {status, headers, data} = result
        res.status(status)
        res.setHeader('content-type', headers['content-type'])
        res.end(JSON.stringify(data)) // 給客戶端返回數(shù)據(jù)
      }).catch(err => {
        res.end(JSON.stringify(err))
      })
})

// 監(jiān)聽請求
app.listen(8081, () => {
	console.log('服務(wù)啟動成功，在8081端口監(jiān)聽請求....')
})

4、Nginx反向代理解決跨域：

nginx通過反向代理解決跨域也是利用了服務(wù)器請求服務(wù)器不受瀏覽器同源策略的限制實現(xiàn)的。

客戶端請求nginx服務(wù)器，在nginx.conf配置文件中配置server監(jiān)聽客戶端的請求，然后把location匹配的路徑代理到真實的服務(wù)器，服務(wù)器處理請求后返回數(shù)據(jù)，nginx再把數(shù)據(jù)給客戶端返回。大致流程如下：

nginx.conf配置文件中的配置：

前端代碼如下：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    axios({
        url: 'http://localhost:8082/api', // 向nginx服務(wù)器發(fā)送請求
        method: 'get'
    }).then(res => {
        console.log('res:', res)
    }).catch(err => {
        console.log('err:', err)
    })
</script>

最終要訪問的服務(wù)端代碼如下：

const express = require('express')
const app = express()

app.get('/api', (req, res) => {
  const user = { // 模擬返回數(shù)據(jù)
    id: 1, 
    name: 'zhangsan',
    age: 12
  }
  res.end(JSON.stringify(user))
})

// 監(jiān)聽請求
app.listen(8081, () => {
	console.log('服務(wù)啟動成功，在8081端口監(jiān)聽請求....')
})

nginx反向代理方式和node中間件代理方式的原理其實差不多，都是利用了服務(wù)器和服務(wù)器之間通信不受瀏覽器的同源策略的限制，但是node代理方式相對復(fù)雜一些，還要自己搭建一個node服務(wù)器，而用nginx只需要修改nginx.conf配置文件即可解決跨域問題。

5、postMessage方式解決跨域:

window.postMessage() 方法可以安全地實現(xiàn)跨源通信，此方法一種受控機制來規(guī)避此限制，只要正確的使用，這種方法就很安全。

主要的用途是實現(xiàn)多窗口，多文檔之間通信：

頁面和其打開的新窗口的數(shù)據(jù)傳遞
多窗口之間消息傳遞
頁面與嵌套的 iframe 消息傳遞

具體的用法請查看：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

接下來實現(xiàn)一個頁面與嵌套的 iframe 消息傳遞的示例：

index.html頁面代碼如下：http://127.0.0.1:5500

<body> 
    <h2>index頁面</h2>
    <iframe
        src="http://localhost:3000"
        frameborder="0"
        id="iframe"
        onload="load()"
        ></iframe>
</body>
<script>
    window.addEventListener('message', ev => {
        const {data, origin, source} = ev
        if(origin !== 'http://localhost:3000') return
        console.log('接收iframe頁面發(fā)送的消息：', data)

    })
    function load() {
        iframe.contentWindow.postMessage("給iframe頁面發(fā)送的消息", "http://localhost:3000");
    }
</script>

iframe頁面的代碼如下：http://localhost:3000

<body>
    <h1>iframe嵌入的頁面</h1>
</body>
<script>
    window.addEventListener('message', ev => {
        const {data, origin, source} = ev
        if(origin !== 'http://127.0.0.1:5500') return
        console.log('接收到index頁面發(fā)送的消息:', data)
        source.postMessage('給index頁面發(fā)送的消息', origin)
    })
</script>

使用postMessage向其它窗口發(fā)送數(shù)據(jù)的時候需要注意的就是，應(yīng)該始終指定精確的目標(biāo) origin，而不是 *，使用window監(jiān)聽message事件，接收其他網(wǎng)站發(fā)送的 message時，請始終使用 origin 和 source 屬性驗證發(fā)件人的身份。

6、Websocket方式解決跨域：

使用Websocket也可以解決跨域問題，因為WebSocket本身不存在跨域問題，所以我們可以利用webSocket來進行非同源之間的通信，

WebSocket 規(guī)范定義了一個在 Web 瀏覽器和服務(wù)器之間建立“套接字”連接的 API。簡單來說：客戶端和服務(wù)器之間存在持久連接，雙方可以隨時開始發(fā)送數(shù)據(jù)。

WebSocket 的基本使用如下，前端代碼：

<script>
    const ws = new WebSocket('ws://localhost:8081')
    // 當(dāng)連接打開時，向服務(wù)器發(fā)送一些數(shù)據(jù)
    ws.onopen = () => {
        ws.send('Hi!') // 使用send方法向服務(wù)端發(fā)送內(nèi)容
    }

    // 監(jiān)聽錯誤
    ws.onerror =  error => {
        console.log('WebSocket Error ' + error);
    };

    // 監(jiān)聽服務(wù)端發(fā)送的數(shù)據(jù)
    ws.onmessage =  e => {
        console.log('Server: ' + e.data);
    };
</script>

服務(wù)端代碼如下：

// WebSocket服務(wù)
const WebSocket = require("ws");

const server = new WebSocket.Server({ port: 8081 });

server.on("connection", function(socket) {
  // 監(jiān)聽客戶端發(fā)送的消息
  socket.on("message", function(data) {
    console.log('clent data:', data)
    socket.send(data); // 向客戶端發(fā)送消息
  });
});

注意：