很是全的跨域實現方案
因爲同源策略的限制，知足同源的腳本才能夠獲取資源。雖然這樣有助於保障網絡安全，但另外一方面也限制了資源的使用。
那麼如何實現跨域呢，如下是實現跨域的一些方法。html
1、jsonp跨域
原理：script標籤引入js文件不受跨域影響。不只如此，帶src屬性的標籤都不受同源策略的影響。前端
正是基於這個特性，咱們經過script標籤的src屬性加載資源，數據放在src屬性指向的服務器上，使用json格式。html5
因爲咱們沒法判斷script的src的加載狀態，並不知道數據有沒有獲取完成，因此事先會定義好處理函數。服務端會在數據開頭加上這個函數名，等所有加載完畢，便會調用咱們事先定義好的函數，這時函數的實參傳入的就是後端返回的數據了。node
示例代碼：https://github.com/mfaying/le...
演示網址：https://mfaying.github.io/les...jquery
index.htmlnginx
<!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.jsgit
callback({"test": 0});
訪問index.html彈窗便會顯示0github
該方案的缺點是：只能實現get一種請求。web
2、document.domain + iframe跨域
此方案僅限主域相同，子域不一樣的應用場景。json
好比百度的主網頁是www.baidu.com，zhidao.baidu.com、news.baidu.com等網站是www.baidu.com這個主域下的子域。
實現原理：兩個頁面都經過js設置document.domain爲基礎主域，就實現了同域，就能夠互相操做資源了。
示例代碼：https://github.com/mfaying/le...
演示網址：https://mfaying.github.io/les...
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>
3、location.hash + iframe跨域
父頁面改變iframe的src屬性，location.hash的值改變，不會刷新頁面(仍是同一個頁面)，在子頁面能夠經過window.localtion.hash獲取值。
示例代碼：https://github.com/mfaying/le...
演示網址：https://mfaying.github.io/les...
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
4、window.name + iframe跨域
原理：window.name屬性在不一樣的頁面（甚至不一樣域名）加載後依舊存在，name可賦較長的值（2MB）。
在iframe非同源的頁面下設置了window的name屬性，再將iframe指向同源的頁面，此時window的name屬性值不變，從而實現了跨域獲取數據。
示例代碼：https://github.com/mfaying/le...
演示網址：https://mfaying.github.io/les...
./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>
5、postMessage跨域
postMessage是HTML5提出的，能夠實現跨文檔消息傳輸。
用法
getMessageHTML.postMessage(data, origin);
data： html5規範支持的任意基本類型或可複製的對象，但部分瀏覽器只支持字符串，因此傳參時最好用JSON.stringify()序列化。
origin： 協議+主機+端口號，也能夠設置爲"*"，表示能夠傳遞給任意窗口，若是要指定和當前窗口同源的話設置爲"/"。
getMessageHTML是咱們對於要接受信息頁面的引用，能夠是iframe的contentWindow屬性、window.open的返回值、經過name或下標從window.frames取到的值。
示例代碼：https://github.com/mfaying/le...
演示網址：https://mfaying.github.io/les...
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。
6、跨域資源共享（CORS）
只要在服務端設置Access-Control-Allow-Origin就能夠實現跨域請求，如果cookie請求，先後端都須要設置。
因爲同源策略的限制，所讀取的cookie爲跨域請求接口所在域的cookie，並不是當前頁的cookie。
CORS是目前主流的跨域解決方案。
原生node.js實現
示例代碼：https://github.com/mfaying/le...
演示網址：https://mfaying.github.io/les... server.js命令啓動本地服務器)
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', // 後端容許發送Cookie
'Access-Control-Allow-Origin': 'https://mfaying.github.io', // 容許訪問的域（協議+域名+端口）
'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結合koa2-cors中間件實現
示例代碼：https://github.com/mfaying/le...
演示網址：https://mfaying.github.io/les... (訪問前須要先執行node server.js命令啓動本地服務器)
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');
7、WebSocket協議跨域
WebSocket協議是HTML5的新協議。可以實現瀏覽器與服務器全雙工通訊，同時容許跨域，是服務端推送技術的一種很好的實現。
示例代碼：https://github.com/mfaying/le...
演示網址：https://mfaying.github.io/les...，再執行node server.js命令啓動本地websocket服務端)
前端代碼：
<!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');
// 創建鏈接觸發的事件
ws.onopen = function () {
var data = { "test": 1 };
ws.send(JSON.stringify(data));// 能夠給後臺發送數據
};
// 接收到消息的回調方法
ws.onmessage = function (event) {
alert(JSON.parse(event.data).test);
}
// 斷開鏈接觸發的事件
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');
});
});
8、nginx代理跨域
原理：同源策略是瀏覽器的安全策略，不是HTTP協議的一部分。服務器端調用HTTP接口只是使用HTTP協議，不存在跨越問題。
實現：經過nginx配置代理服務器（域名與test1相同，端口不一樣）作跳板機，反向代理訪問test2接口，且能夠修改cookie中test信息，方便當前域cookie寫入，實現跨域登陸。
nginx具體配置：
#proxy服務器
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; #當前端只跨域不帶cookie時，可爲*
add_header Access-Control-Allow-Credentials true;
}
}
- 1. 很是全的跨域實現方案
- 2. 什麼是跨域請求以及實現跨域的方案
- 3. 跨域問題解決方案(HttpClient安全跨域 & jsonp跨域)
- 4. 跨域單點登陸方案實現
- 5. 跨域方案總結與實現
- 6. Angular經過CORS實現跨域方案
- 7. 跨域解決方案及實現
- 8. 跨域解決方案二：使用JSONP實現跨域
- 9. 跨域解決方案一：使用CORS實現跨域
- 10. 常見的跨域解決方案(全)
- 更多相關文章...
- • 現實生活中的 XML - XML 教程
- • Mybatis實現映射器的2種方式 - MyBatis教程
- • PHP Ajax 跨域問題最佳解決方案
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
- 1. 很是全的跨域實現方案
- 2. 什麼是跨域請求以及實現跨域的方案
- 3. 跨域問題解決方案(HttpClient安全跨域 & jsonp跨域)
- 4. 跨域單點登陸方案實現
- 5. 跨域方案總結與實現
- 6. Angular經過CORS實現跨域方案
- 7. 跨域解決方案及實現
- 8. 跨域解決方案二：使用JSONP實現跨域
- 9. 跨域解決方案一：使用CORS實現跨域
- 10. 常見的跨域解決方案(全)