九種前端跨域處理方案

大鵬_yp 2021-09-18 11:40:09 阅读数:372

前端 方案

同源策略

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

  • 同源策略:如果兩個頁面的協議,域名,端口都相同,則兩個頁面具有相同的源。
    同源策略是瀏覽器的一個安全功能,不同源的客戶端脚本在沒有明確授權的情况下,不能讀寫對方資源。這是一個用於隔離潜在惡意文件的重要安全機制。

不受同源策略限制的

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

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

受到限制的

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

跨域解决方案

一、JSONP跨域

  • jsonp的核心原理就是:目標頁面回調本地頁面的方法,並帶入參數
  • 服務器端實現 JSONP 接口的步驟
    1. 服務器端獲取客戶端發送過來的query參數,其中參數有回調函數的名字
    2. 得到的數據,拼接出一個函數調用的字符串
    3. 把上一步拼接得到的字符串,響應給客戶端的 <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.');
});
});
版权声明:本文为[大鵬_yp]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210918114008406L.html