js前端解決跨域的八種實現(xiàn)方案
由于同源策略的限制，滿足同源的腳本才可以獲取資源。雖然這樣有助于保障網(wǎng)絡(luò)安全，但另一方面也限制了資源的使用。
那么如何實現(xiàn)跨域呢，以下是實現(xiàn)跨域的一些方法。
一、jsonp跨域
原理：script標(biāo)簽引入js文件不受跨域影響。不僅如此，帶src屬性的標(biāo)簽都不受同源策略的影響。
正是基于這個特性，我們通過script標(biāo)簽的src屬性加載資源，數(shù)據(jù)放在src屬性指向的服務(wù)器上，使用json格式。
由于我們無法判斷script的src的加載狀態(tài)，并不知道數(shù)據(jù)有沒有獲取完成，所以事先會定義好處理函數(shù)。服務(wù)端會在數(shù)據(jù)開頭加上這個函數(shù)名，等全部加載完畢，便會調(diào)用我們事先定義好的函數(shù)，這時函數(shù)的實參傳入的就是后端返回的數(shù)據(jù)了。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
function callback(data) {
alert(data.test);
}
</script>
<script src="./jsonp.js"></script>
</body>
</html>
jsonp.js
callback({"test": 0});
訪問index.html彈窗便會顯示0
該方案的缺點是：只能實現(xiàn)get一種請求。
二、document.domain + iframe跨域
此方案僅限主域相同，子域不同的應(yīng)用場景。
比如百度的主網(wǎng)頁是www.baidu.com，zhidao.baidu.com、news.baidu.com等網(wǎng)站是www.baidu.com這個主域下的子域。
實現(xiàn)原理：兩個頁面都通過js設(shè)置document.domain為基礎(chǔ)主域，就實現(xiàn)了同域，就可以互相操作資源了。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="https://mfaying.github.io/lesson/cross-origin/document-domain/child.html"></iframe>
<script>
document.domain = 'mfaying.github.io';
var t = '0';
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
document.domain = 'mfaying.github.io';
alert(window.parent.t);
</script>
</body>
</html>
三、location.hash + iframe跨域
父頁面改變iframe的src屬性，location.hash的值改變，不會刷新頁面(還是同一個頁面)，在子頁面可以通過window.localtion.hash獲取值。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="child.html#" style="display: none;"></iframe>
<script>
var oIf = document.getElementsByTagName('iframe')[0];
document.addEventListener('click', function () {
oIf.src += '0';
}, false);
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
window.onhashchange = function() {
alert(window.location.hash.slice(1));
}
</script>
</body>
</html>
點擊index.html頁面彈窗便會顯示0
四、window.name + iframe跨域
原理：window.name屬性在不同的頁面（甚至不同域名）加載后依舊存在，name可賦較長的值（2MB）。
在iframe非同源的頁面下設(shè)置了window的name屬性，再將iframe指向同源的頁面，此時window的name屬性值不變，從而實現(xiàn)了跨域獲取數(shù)據(jù)。
./parent/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var oIf = document.createElement('iframe');
oIf.src = 'https://mfaying.github.io/lesson/cross-origin/window-name/child.html';
var state = 0;
oIf.onload = function () {
if (state === 0) {
state = 1;
oIf.src = 'https://mfaying.github.io/lesson/cross-origin/window-name/parent/proxy.html';
} else {
alert(JSON.parse(oIf.contentWindow.name).test);
}
}
document.body.appendChild(oIf);
</script>
</body>
</html>
./parent/proxy.html
空文件，僅做代理頁面
./child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
window.name = '{"test": 0}'
</script>
</body>
</html>
五、postMessage跨域
postMessage是HTML5提出的，可以實現(xiàn)跨文檔消息傳輸。
用法
getMessageHTML.postMessage(data, origin);
data： html5規(guī)范支持的任意基本類型或可復(fù)制的對象，但部分瀏覽器只支持字符串，所以傳參時最好用JSON.stringify()序列化。
origin： 協(xié)議+主機(jī)+端口號，也可以設(shè)置為"*"，表示可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。
getMessageHTML是我們對于要接受信息頁面的引用，可以是iframe的contentWindow屬性、window.open的返回值、通過name或下標(biāo)從window.frames取到的值。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe id='ifr' src='./child.html' style="display: none;"></iframe>
<button id='btn'>click</button>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function () {
var ifr = document.getElementById('ifr');
ifr.contentWindow.postMessage(0, '*');
}, false);
</script>
</body>
</html>
child.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
window.addEventListener('message', function(event){
alert(event.data);
}, false);
</script>
</body>
</html>
點擊index.html頁面上的按鈕，彈窗便會顯示0。
六、跨域資源共享（CORS）
只要在服務(wù)端設(shè)置Access-Control-Allow-Origin就可以實現(xiàn)跨域請求，若是cookie請求，前后端都需要設(shè)置。
由于同源策略的限制，所讀取的cookie為跨域請求接口所在域的cookie，并非當(dāng)前頁的cookie。
CORS是目前主流的跨域解決方案。
原生node.js實現(xiàn)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<script>
$.get('http://localhost:8080', function (data) {
alert(data);
});
</script>
</body>
</html>
server.js
var http = require('http');
var server = http.createServer();
server.on('request', function(req, res) {
res.writeHead(200, {
'Access-Control-Allow-Credentials': 'true', // 后端允許發(fā)送Cookie
'Access-Control-Allow-Origin': 'https://mfaying.github.io', // 允許訪問的域（協(xié)議+域名+端口）
'Set-Cookie': 'key=1;Path=/;Domain=mfaying.github.io;HttpOnly' // HttpOnly:腳本無法讀取cookie
});
res.write(JSON.stringify(req.method));
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
koa結(jié)合koa2-cors中間件實現(xiàn)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<script>
$.get('http://localhost:8080', function (data) {
alert(data);
});
</script>
</body>
</html>
server.js
var koa = require('koa');
var router = require('koa-router')();
const cors = require('koa2-cors');
var app = new koa();
app.use(cors({
origin: function (ctx) {
if (ctx.url === '/test') {
return false;
}
return '*';
},
exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
maxAge: 5,
credentials: true,
allowMethods: ['GET', 'POST', 'DELETE'],
allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))
router.get('/', async function (ctx) {
ctx.body = "0";
});
app
.use(router.routes())
.use(router.allowedMethods());
app.listen(3000);
console.log('server is listening in port 3000');
七、WebSocket協(xié)議跨域
WebSocket協(xié)議是HTML5的新協(xié)議。能夠?qū)崿F(xiàn)瀏覽器與服務(wù)器全雙工通信，同時允許跨域，是服務(wù)端推送技術(shù)的一種很好的實現(xiàn)。
前端代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
var ws = new WebSocket('ws://localhost:8080/', 'echo-protocol');
// 建立連接觸發(fā)的事件
ws.onopen = function () {
var data = { "test": 1 };
ws.send(JSON.stringify(data));// 可以給后臺發(fā)送數(shù)據(jù)
};
// 接收到消息的回調(diào)方法
ws.onmessage = function (event) {
alert(JSON.parse(event.data).test);
}
// 斷開連接觸發(fā)的事件
ws.onclose = function () {
conosle.log('close');
};
</script>
</body>
</html>
server.js
var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer(function(request, response) {
response.writeHead(404);
response.end();
});
server.listen(8080, function() {
console.log('Server is listening on port 8080');
});
wsServer = new WebSocketServer({
httpServer: server,
autoAcceptConnections: false
});
function originIsAllowed(origin) {
return true;
}
wsServer.on('request', function(request) {
if (!originIsAllowed(request.origin)) {
request.reject();
console.log('Connection from origin ' + request.origin + ' rejected.');
return;
}
var connection = request.accept('echo-protocol', request.origin);
console.log('Connection accepted.');
connection.on('message', function(message) {
if (message.type === 'utf8') {
const reqData = JSON.parse(message.utf8Data);
reqData.test -= 1;
connection.sendUTF(JSON.stringify(reqData));
}
});
connection.on('close', function() {
console.log('close');
});
});
八、nginx代理跨域
原理：同源策略是瀏覽器的安全策略，不是HTTP協(xié)議的一部分。服務(wù)器端調(diào)用HTTP接口只是使用HTTP協(xié)議，不存在跨越問題。
實現(xiàn)：通過nginx配置代理服務(wù)器（域名與test1相同，端口不同）做跳板機(jī)，反向代理訪問test2接口，且可以修改cookie中test信息，方便當(dāng)前域cookie寫入，實現(xiàn)跨域登錄。
nginx具體配置：
#proxy服務(wù)器
server {
listen 81;
server_name www.test1.com;
location / {
proxy_pass http://www.test2.com:8080; #反向代理
proxy_cookie_test www.test2.com www.test1.com; #修改cookie里域名
index index.html index.htm;
add_header Access-Control-Allow-Origin http://www.test1.com; #當(dāng)前端只跨域不帶cookie時，可為*
add_header Access-Control-Allow-Credentials true;
}
}
到此這篇關(guān)于js前端解決跨域的八種實現(xiàn)方案的文章就介紹到這了,更多相關(guān)js 跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js的.innerHTML = ""IE9下顯示有錯誤的解決方法
js的.innerHTML= "……"在ie9- 的版本顯示不正常，使用jquery可以解決，有類似問題的朋友可以參考下2013-09-09
JS實現(xiàn)table表格內(nèi)針對某列內(nèi)容進(jìn)行即時搜索篩選功能
這篇文章主要介紹了JS實現(xiàn)table表格內(nèi)針對某列內(nèi)容進(jìn)行即時搜索篩選功能,涉及javascript針對HTML元素的遍歷、屬性動態(tài)修改相關(guān)操作技巧,需要的朋友可以參考下2018-05-05
后端代碼規(guī)范避免數(shù)組下標(biāo)越界
這篇文章主要為大家介紹了后端開發(fā)中的代碼如何規(guī)范避免數(shù)組下標(biāo)越界示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
拖動后怎么把布局結(jié)果保存呢？？我開始考慮是記錄每個拖動對象的的坐標(biāo)，可做起來我感覺好麻煩，所以就沒有采用這種方法。2010-10-10
打印/預(yù)覽/設(shè)置的客戶端代碼...2006-08-08
js數(shù)組轉(zhuǎn)json并在后臺對其解析具體實現(xiàn)
這篇文章主要介紹了js數(shù)組轉(zhuǎn)json并在后臺對其解析具體實現(xiàn)，有需要的朋友可以參考一下2013-11-11
JS把字符串格式的時間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時前、幾天前等格式
最近在做項目的時候，需要把后臺返回的時間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時前、幾天前等的格式，接下來通過本文給大家分享JS把字符串格式的時間轉(zhuǎn)換成幾秒前、幾分鐘前、幾小時前、幾天前等格式 ,需要的朋友可以參考下2019-07-07
仿iPhone通訊錄制作小程序自定義選擇組件的實現(xiàn)
這篇文章主要介紹了仿iPhone通訊錄制作小程序自定義選擇組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本篇文章主要介紹了javascript實現(xiàn)滑動解鎖功能的方法實例，具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
微信小程序使用template標(biāo)簽實現(xiàn)五星評分功能
這篇文章主要為大家詳細(xì)介紹了微信小程序使用template標(biāo)簽實現(xiàn)五星評分功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11