一文詳解最常見的六種跨域解決方案
前言：什么是跨域？
跨域就是當在頁面上發(fā)送ajax請求時，由于瀏覽器同源策略的限制，要求當前頁面和服務端必須同源，也就是協(xié)議、域名和端口號必須一致。
如果協(xié)議、域名和端口號中有其中一個不一致，則瀏覽器視為跨域，進行攔截。
1、JSONP方式解決跨域：
jsonp的原理就是利用了script標簽不受瀏覽器同源策略的限制，然后和后端一起配合來解決跨域問題的。
具體的實現(xiàn)就是在客戶端創(chuàng)建一個script標簽，然后把請求后端的接口拼接一個回調函數(shù)名稱作為參數(shù)傳給后端，并且賦值給script標簽的src屬性，然后把script標簽添加到body中，當后端接收到客戶端的請求時，會解析得到回調函數(shù)名稱，然后把數(shù)據和回調函數(shù)名稱拼接成函數(shù)調用的形式返回，客戶端解析后會調用定義好的回調函數(shù)，然后在回調函數(shù)中就可以獲取到后端返回的數(shù)據了。
頁面中可能會存在多個jsonp，所以可以封裝一個jsonp方法，客戶端代碼如下：
<script>
// 封裝一個jsonp函數(shù)
function jsonp({url, params, callback}) {
return new Promise((resolve, reject) => {
// 定義回調函數(shù)
window[callback] = function(data) {
resolve(data)
}
const script = document.createElement('script') // 創(chuàng)建script標簽
params = {...params, callback}
const arr = []
for(const key in params) {
if(params.hasOwnProperty(key)) { // 判斷當前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>
服務端代碼如下(nodeJS)：
const http = require('http')
const url = require('url')
// 創(chuàng)建server
const server = http.createServer()
// 監(jiān)聽http請求
server.on('request', (req, res) => {
// 獲取客戶端傳來的回調函數(shù)名稱
const {callback} = url.parse(req.url, true).query
const user = { // 模擬返回數(shù)據
id: 1,
name: 'zhangsan',
age: 12
}
// 把數(shù)據和回調函數(shù)名稱拼接成函數(shù)調用的方式返回
const result = `${callback}(${JSON.stringify(user)})`
res.end(result)
})
// 設置監(jiān)聽端口
server.listen(8081, function() {
console.log('server is running on 8081 port！')
})
jsonp的優(yōu)點就是兼容性好，可以解決主流瀏覽器的跨域問題，缺點是僅支持GET請求，不安全，可能遭受xss攻擊。
2、CORS方式解決跨域：
cors是跨域資源共享，是一種基于 HTTP 頭的機制，該機制通過允許服務器標示除了它自己以外的其它 origin（域，協(xié)議和端口），使得瀏覽器允許這些 origin 訪問加載自己的資源。服務端設置了Access-Control-Allow-Origin就開啟了CORS，所以這種方式只要后端實現(xiàn)了CORS，就解決跨域問題，前端不需要配置。
服務端設置Access-Control-Allow-Origin響應頭即可，服務端代碼如下：
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ù)據
id: 1,
name: 'zhangsan',
age: 12
}
const origin = req.headers.origin
if(authOrigin.includes(origin)) {
// 添加響應頭，實現(xiàn)cors
// res.setHeader('Access-Control-Allow-Origin', '*') // 允許所有的地址跨域訪問
res.setHeader('Access-Control-Allow-Origin', origin) // 只有白名單中的地址才可以跨域訪問
}
res.end(JSON.stringify(user))
})
// 設置監(jiān)聽端口
server.listen(8081, function() {
console.log('server is running on 8081 port！')
})
當客戶端訪問時服務端接口時，就可以看到響應頭中服務端配置的Access-Control-Allow-Origin：
CORS方式解決跨域問題比較常用，只需要后端配置響應頭Access-Control-Allow-Origin，前端無需配置，實現(xiàn)簡單。
3、搭建Node代理服務器解決跨域：
因為同源策略是瀏覽器限制的，所以服務端請求服務器是不受瀏覽器同源策略的限制的，因此我們可以搭建一個自己的node服務器來代理訪問服務器。
大概的流程就是：我們在客戶端請求自己的node代理服務器，然后在node代理服務器中轉發(fā)客戶端的請求訪問服務器，服務器處理請求后給代理服務器響應數(shù)據，然后在代理服務器中把服務器響應的數(shù)據再返回給客戶端。客戶端和自己搭建的代理服務器之間也存在跨域問題，所以需要在代理服務器中設置CORS。
基本的工作流程如下：
客戶端代碼如下：
<!-- 引入axios發(fā)送請求 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// 簡單封裝一個axios向代理服務器發(fā)送請求
function proxyAxios(data) {
return axios({
url: 'http://localhost:8081/proxyApi', // 請求自己搭建的node代理服務器的地址
method: 'POST',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data
})
}
// 使用node代理服務器向服務器發(fā)送請求
proxyAxios({
url: 'https://class.imooc.com/getadver',// 需要代理訪問真實服務器的url
method: 'GET',
}).then(res => {
console.log('res:', res)
}).catch(err => {
console.log(err)
})
</script>
node服務器代碼如下：
/**通過nodeJS搭建自己的代理服務器來解決跨域問題 */
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ù)
}
// 設置響應頭
// 代理服務器設置CORS，允許跨域訪問
res.setHeader('Access-Control-Allow-Origin', '*')
res.setHeader('Access-Control-Allow-Methods', '*') // 允許所有的請求方式
const {url, method = "GET", ...resConfig} = reqParams || {}
// node代理請求服務器
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ù)據
}).catch(err => {
res.end(JSON.stringify(err))
})
})
// 監(jiān)聽請求
app.listen(8081, () => {
console.log('服務啟動成功，在8081端口監(jiān)聽請求....')
})
4、Nginx反向代理解決跨域：
nginx通過反向代理解決跨域也是利用了服務器請求服務器不受瀏覽器同源策略的限制實現(xiàn)的。
客戶端請求nginx服務器，在nginx.conf配置文件中配置server監(jiān)聽客戶端的請求，然后把location匹配的路徑代理到真實的服務器，服務器處理請求后返回數(shù)據，nginx再把數(shù)據給客戶端返回。大致流程如下：
nginx.conf配置文件中的配置：
前端代碼如下：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
axios({
url: 'http://localhost:8082/api', // 向nginx服務器發(fā)送請求
method: 'get'
}).then(res => {
console.log('res:', res)
}).catch(err => {
console.log('err:', err)
})
</script>
最終要訪問的服務端代碼如下：
const express = require('express')
const app = express()
app.get('/api', (req, res) => {
const user = { // 模擬返回數(shù)據
id: 1,
name: 'zhangsan',
age: 12
}
res.end(JSON.stringify(user))
})
// 監(jiān)聽請求
app.listen(8081, () => {
console.log('服務啟動成功，在8081端口監(jiān)聽請求....')
})
nginx反向代理方式和node中間件代理方式的原理其實差不多，都是利用了服務器和服務器之間通信不受瀏覽器的同源策略的限制，但是node代理方式相對復雜一些，還要自己搭建一個node服務器，而用nginx只需要修改nginx.conf配置文件即可解決跨域問題。
5、postMessage方式解決跨域:
window.postMessage() 方法可以安全地實現(xiàn)跨源通信，此方法一種受控機制來規(guī)避此限制，只要正確的使用，這種方法就很安全。
主要的用途是實現(xiàn)多窗口，多文檔之間通信：
- 頁面和其打開的新窗口的數(shù)據傳遞
- 多窗口之間消息傳遞
- 頁面與嵌套的 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ù)據的時候需要注意的就是，應該始終指定精確的目標 origin，而不是 *，使用window監(jiān)聽message事件，接收其他網站發(fā)送的 message時，請始終使用 origin 和 source 屬性驗證發(fā)件人的身份。
6、Websocket方式解決跨域：
使用Websocket也可以解決跨域問題，因為WebSocket本身不存在跨域問題，所以我們可以利用webSocket來進行非同源之間的通信，
WebSocket 規(guī)范定義了一個在 Web 瀏覽器和服務器之間建立“套接字”連接的 API。 簡單來說：客戶端和服務器之間存在持久連接，雙方可以隨時開始發(fā)送數(shù)據。
WebSocket 的基本使用如下，前端代碼：
<script>
const ws = new WebSocket('ws://localhost:8081')
// 當連接打開時，向服務器發(fā)送一些數(shù)據
ws.onopen = () => {
ws.send('Hi!') // 使用send方法向服務端發(fā)送內容
}
// 監(jiān)聽錯誤
ws.onerror = error => {
console.log('WebSocket Error ' + error);
};
// 監(jiān)聽服務端發(fā)送的數(shù)據
ws.onmessage = e => {
console.log('Server: ' + e.data);
};
</script>
服務端代碼如下：
// WebSocket服務
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ā)送消息
});
});
注意：
- 服務端需要通過npm install ws 來安裝ws模塊
- 在使用ws的時候發(fā)現(xiàn)服務端接收到客戶端的數(shù)據是二進制，而服務端給客戶端返回的數(shù)據也是二進制，
解決這個問題的辦法就是安裝低版本的webSocket依賴，我之前安裝的是8.8.1版本的就會出現(xiàn)這個問題，后來切換為7.3.0并重新npm i 和重新啟動服務就可以解決這個問題了。
總結：
- jsonp的原理是利用了script標簽不受瀏覽器同源策略的限制，img和link標簽也是不受瀏覽器同源策略限制的。
- 跨域是瀏覽器限制，服務端和服務端之間通信是不受瀏覽器同源策略限制的。
- 所有跨域的解決方案都是需要服務端配合的。
- 最常用的跨域解決方案是CORS、Node代理服務器和Nginx反向代理方式。
- postMessage更多的是用在多個文檔，窗口之間發(fā)送數(shù)據。
到此這篇關于最常見的六種跨域解決方案的文章就介紹到這了,更多相關常見跨域解決方案內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。本文給大家介紹Bootstrap 表格與按鈕功能，感興趣的朋友參考下吧2016-04-04
這篇文章主要介紹了js消除圖片小游戲代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
JavaScript 節(jié)點操作 以及DOMDocument屬性和方法
最近發(fā)現(xiàn)DOMDocument對象很重要,還有XMLHTTP也很重要 注意大小寫一定不能弄錯.2007-12-12
JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來dump某些對象的詳細信息,需要的朋友可以參考下2014-12-12
本文主要介紹了小程序中讀取騰訊文檔的表格數(shù)據的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
微信小程序搜索框樣式并實現(xiàn)跳轉到搜索頁面(小程序搜索功能)
這篇文章主要介紹了微信小程序搜索框樣式并實現(xiàn)跳轉到搜索頁面(小程序搜索功能),需要的朋友可以參考下2020-03-03
這篇文章主要介紹了使用JS獲取頁面上的所有標簽 ,需要的朋友可以參考下2018-10-10
javascript刪除元素節(jié)點removeChild()用法實例
這篇文章主要介紹了javascript刪除元素節(jié)點removeChild()用法,實例分析了removeChild()方法移除節(jié)點的使用技巧,需要的朋友可以參考下2015-05-05
本篇文章主要是對js正則表達exec與match的區(qū)別進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了怎樣用Javascript實現(xiàn)單例模式，想學習設計模式的同學，可以參考下2021-04-04