本文將爲你們介紹,前端開發中,最經常使用的幾種跨域解決方案;javascript
看完本文能夠系統地掌握,不一樣種跨域解決方案間的巧妙,以及它們的用法、原理、侷限性和適用的場景html
包括如下幾個方面:前端
iframe
標籤,實現不一樣域的關聯)若是你仍是對跨域概念或單單配置仍是很模糊的話,或者面試中常常被問到,可是回答的不全面的話,可能這篇文章適合你。java
公衆號👉 前端時光屋,查看更多更質量文章。node
若是兩個URL的協議protocol
、主機名host
和端口號port
都相同的話,則這兩個URL是同源。webpack
同源策略是一個重要的安全策略。它可以阻斷惡意文檔,減小被攻擊的媒介。web
真實項目中,不多有同源策略,大部分都是非同源策略面試
當協議、域名與端口號中任意一個不相同時,都算做不一樣域,不一樣域之間相互請求資源的表現(非同源策略請求),稱做」跨域「。ajax
那麼咱們就下面的網址分析一下,哪一塊是協議,哪一塊是域名及端口號express
http://kbs.sports.qq.com/index.html
協議:http(還有以一種https協議)
域名:kbs.sports.qq.com
端口號:80
https://127.0.0.1:3000
協議:https
域名:127.0.0.1
端口號:3000
複製代碼
假如咱們的真實項目開發中的Web服務器
地址爲 」kbs.sports.qq.com/index.html「… "api.sports.qq.com/list"
當Web服務器的地址向數據接口的地址發送請求時,便會形成了跨域現象。
Web服務器:主要用來靜態資源文件的處理
iframe
標籤,實現不一樣域的關聯)在後面會詳細分析這四種解決方案的原理和用法配置,以及它們的優勢和侷限性
注意: 基於
ajax
或fetch
發送請求時,若是是跨域的,則瀏覽器默認的安全策略會禁止該跨域請求
補充說明:如下全部的測試用例,均由
Web:http://127.0.0.1:5500/index.html
向API:http://127.0.0.1:1001/list
發起請求
API接口的服務器端是本身經過express
創建的,下文在服務器端以app.use
中間件的形式接受來自客戶端
的請求並作處理。
即 在「http://127.0.0.1:1001/list」from origin「http://127.0.0.1:55」上對XMLHttpRequest的訪問已被CORS策略阻止:被請求的資源上沒有「Access- control - allow-origin」頭
在後端開啓了一個端口號爲1001的服務器以後,咱們來實踐一下
let xhr = new XMLHttpRequest;
xhr.open('get', 'http://127.0.0.1:1001/list');
xhr.onreadystatechange = () => {
if (xhr.status === 200 && xhr.readyState === 4) {
console.log(xhr.responseText);
}
};
xhr.send();
複製代碼
這就是因爲瀏覽器默認的安全策略禁止致使的。
下面介紹一下幾種常見的解決方案。
原理:JSONP
利用script
標籤不存在域的限制,且定義一個全局執行上下文
中的函數func
(用來接收服務器端返回的數據信息)來接收數據,從而實現跨域請求。
弊端:
- 只容許GET請求
- 不安全:只要瀏覽器支持,且存在瀏覽器的全局變量裏,則誰均可以調用
callback
必須是一個全局上下文中的函數(防止不是全局的函數,咱們須要把這個函數放在全局上,而且從服務器端接收回信息時,要瀏覽器執行該函數)
注意:
uniqueName
變量存儲全局的回調函數(確保每次的callback
都具備惟一性)url
中是否含有"?",有的話直接拼接callback
,沒有的話補」?「// 客戶端
function jsonp(url, callback) {
// 把傳遞的回調函數掛載到全局上
let uniqueName = `jsonp${new Date().getTime()}`;
// 套了一層 anonymous function
// 目的讓 返回的callback執行且刪除建立的標籤
window[uniqueName] = data => {
// 從服務器獲取結果並讓瀏覽器執行callback
document.body.removeChild(script);
delete window[uniqueName];
callback && callback(data);
}
// 處理URL
url += `${url.includes('?')} ? '&' : '?}callback=${uniqueName}'`;
// 發送請求
let script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
// 執行第二個參數 callback,獲取數據
jsonp('http://127.0.0.1:1001/list?userName="lsh"', (result) => {
console.log(result);
})
複製代碼
// 服務器端
// Api請求數據
app.get('/list', (req, res) => {
// req.query 問號後面傳遞的參數信息
// 此時的callback 爲傳遞過來的函數名字 (uniqueName)
let { callback } = req.query;
// 準備返回的數據(字符串)
let res = { code: 0, data: [10,20] };
let str = `${callback}($(JSON.stringify(res)))`;
// 返回給客戶端數據
res.send(str);
})
複製代碼
測試用例展現:
url
callback
result
// 服務器請求的 url
Request URL:
http://127.0.0.1:1001/list?userName="lsh"&callback=jsonp159876002
// 服務器返回的函數callback
jsonp159876002({"code":0, "data": [10,20]});
// 客戶端接收的數據信息
{ code: 0, data: Array(2) }
複製代碼
當瀏覽器發現返回的是 jsonp159876002({"code":0, "data": [10,20]});
這個函數,會自動幫咱們執行的。
在上文中說到只要服務器端那裏設置了容許經過jsonp
的形式跨域請求,咱們就能夠取回數據。
下面是在咱們封裝完jsonp
方法以後,向一個容許任何源向該服務器發送請求的網址xxx
jsonp('https://matchweb.sports.qq.com/matchUnion/cateColumns?from=pc', result => {
console.log(result);
});
複製代碼
上文提到,不容許跨域的根本緣由是由於Access-Control-Allow-Origin
已被禁止
那麼只要讓服務器端設置容許源
就能夠了
原理:解決掉瀏覽器的默認安全策略,在服務器端設置容許哪些源請求就能夠了
先來看一下下面的設置有哪些問題
// 服務器端
app.use((req, res, next) => {
// * 容許全部源(不安全/不能攜帶資源憑證)
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Credentials", true);
/* res.header("Access-Control-Allow-Headers", "Content-Type,...."); res.header("Access-Control-Allow-Methods", "GET,..."); */
// 試探請求:在CORS跨域請求中,首先瀏覽器會本身發送一個試探請求,驗證是否能夠和服務器跨域通訊,服務器返回200,則瀏覽器繼續發送真實的請求
req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next();
});
// 客戶端
let xhr = new XMLHttpRequest;
xhr.open('get', 'http://127.0.0.1:1001/list');
xhr.setRequestHeader('Cookie', 'name=jason');
xhr.withCredentials = true;
xhr.onreadystatechange = () => {
if (xhr.status === 200 && xhr.readyState === 4) {
console.log(xhr.responseText);
}
};
xhr.send();
複製代碼
當咱們一旦在服務器端設置了容許任何源
能夠請求以後,其實請求是不安全的,而且要求客戶端
不能攜帶資源憑證(好比上文中的Cookie字段),瀏覽器端會報錯。
告訴咱們Cookie
字段是不安全的也不能被設置的,若是容許源爲'*'
的話也是不容許的。
假如在咱們的真實項目開發中
正確寫法✅
Allow-Origin
動態設置爲當前這個源app.use((req, res, next) => {
// 也可自定義白名單,檢驗請求的源是否在白名單裏,動態設置
/* let safeList = [ "http://127.0.0.1:5500", xxx, xxxxx, ]; */
res.header("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
res.header("Access-Control-Allow-Credentials", true); // 設置是否可攜帶資源憑證
/* res.header("Access-Control-Allow-Headers", "Content-Type,...."); res.header("Access-Control-Allow-Methods", "GET,..."); */
// 試探請求:在CORS跨域請求中,首先瀏覽器會本身發送一個試探請求,驗證是否能夠和服務器跨域通訊,服務器返回200,則瀏覽器繼續發送真實的請求
req.method === 'OPTIONS' ? res.send('CURRENT SERVICES SUPPORT CROSS DOMAIN REQUESTS!') : next();
});
複製代碼
ajax
做爲資源請求的方式Allow-Origin
設置爲當前源Proxy翻譯爲「代理」,是由webpack配置的一個插件,叫"webpack-dev-server"(只能在開發環境中使用)
Proxy在webpack中的配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'production',
entry: './src/main.js',
output: {...},
devServer: {
port: '3000',
compress: true,
open: true,
hot: true,
proxy: {
'/': {
target: 'http://127.0.0.1:3001',
changeOrigin: true
}
}
},
// 配置WEBPACK的插件
plugins: [
new HtmlWebpackPlugin({
template: `./public/index.html`,
filename: `index.html`
})
]
};
複製代碼
Proxy代理其實至關於由webpack-dev-server
配置在本地建立了一個port=3000的服務,利用node
的中間層代理(分發)解決了瀏覽器的同源策略限制。
可是它只能在開發環境下使用,由於dev-server
只是一個webpack
的一個插件;
若是須要在生產環境下使用,須要咱們配置Nginx
反向代理服務器;
另外若是是本身實現node服務層代理
:不管是開發環境仍是生產環境均可以處理(node中間層和客戶端是同源,中間層幫助咱們向服務器請求數據,再把數據返回給客戶端)
只能在本地開發階段使用
主要做爲生產環境下跨域的解決方案。
原理:利用Node中間層的分發機制,將請求的URL轉向服務器端的地址
配置反向代理
server {
listen: 80;
server_name: 192.168.161.189;
loaction: {
proxy_pass_http://127.0.0.1:1001; // 請求轉向這個URL地址,服務器地址
root html;
index index.html;
}
}
複製代碼
簡單寫了一下僞代碼,實際開發中根據需求來配。
假設如今有兩個頁面,分別爲A頁面port=1001
、B頁面port=1002
,實現頁面A與頁面B的頁面通訊(跨域)
原理:
iframe.contentWindow.postMessage
向B頁面傳遞某些信息 window.onmessage
獲取A頁面傳遞過來的信息ev.data
(見下代碼)ev.source.postMessage
向A頁面傳遞信息window.onmessage
獲取B頁面傳遞的信息主要利用內置的postMessage
和onmessage
傳遞信息和接收信息。
A.html
// 把 B頁面當作A的子頁面嵌入到A頁面裏
<iframe id="iframe" src="http://127.0.0.1:1002/B.html" frameborder="0" style="display: none;"></iframe>
<script> iframe.onload = function () { iframe.contentWindow.postMessage('珠峯培訓', 'http://127.0.0.1:1002/'); } //=>監聽B傳遞的信息 window.onmessage = function (ev) { console.log(ev.data); } </script>
複製代碼
B.html
<script>
//=>監聽A發送過來的信息
window.onmessage = function (ev) {
// console.log(ev.data);
//=>ev.source:A
ev.source.postMessage(ev.data + '@@@', '*');
}
</script>
複製代碼
1. JSONP方案須要先後端共同配置完成(利用script標籤不存在域的限制)【麻煩,老項目使用】
2. CORS原理簡單,但只能配置單一源,若是須要配置多個源,也只能從白名單中篩選出某一個符合表求的origin
【偶爾使用】
服務器端須要單獨作處理,客戶端較爲簡單
3. Proxy客戶端經過dev-server
,生產環境須要配置Nginx
反向代理(利用Node中間層分發機制)【經常使用】
若是你以爲這篇內容對你挺有啓發,我想邀請你幫我三個小忙: