很是全的跨域實現方案
因爲同源策略的限制，知足同源的腳本才能夠獲取資源。雖然這樣有助於保障網絡安全，但另外一方面也限制了資源的使用。 那麼如何實現跨域呢，如下是實現跨域的一些方法。javascript
1、jsonp跨域
原理：script標籤引入js文件不受跨域影響。不只如此，帶src屬性的標籤都不受同源策略的影響。html
正是基於這個特性，咱們經過script標籤的src屬性加載資源，數據放在src屬性指向的服務器上，使用json格式。前端
因爲咱們沒法判斷script的src的加載狀態，並不知道數據有沒有獲取完成，因此事先會定義好處理函數。服務端會在數據開頭加上這個函數名，等所有加載完畢，便會調用咱們事先定義好的函數，這時函數的實參傳入的就是後端返回的數據了。html5
示例代碼：github.com/mfaying/les… 演示網址：mfaying.github.io/lesson/cros…java
index.htmlnode
<!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.jsjquery
callback({"test": 0});
複製代碼
訪問index.html彈窗便會顯示0nginx
該方案的缺點是：只能實現get一種請求。git
2、document.domain + iframe跨域
此方案僅限主域相同，子域不一樣的應用場景。github
好比百度的主網頁是www.baidu.com，zhidao.baidu.com、news.baidu.com等網站是www.baidu.com這個主域下的子域。
實現原理：兩個頁面都經過js設置document.domain爲基礎主域，就實現了同域，就能夠互相操做資源了。 示例代碼：github.com/mfaying/les… 演示網址：mfaying.github.io/lesson/cros…
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獲取值。
示例代碼：github.com/mfaying/les… 演示網址：mfaying.github.io/lesson/cros…
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屬性值不變，從而實現了跨域獲取數據。 示例代碼：github.com/mfaying/les… 演示網址：mfaying.github.io/lesson/cros…
./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取到的值。
示例代碼：github.com/mfaying/les… 演示網址：mfaying.github.io/lesson/cros…
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實現
示例代碼：github.com/mfaying/les… 演示網址：mfaying.github.io/lesson/cros…(訪問前須要先執行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 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中間件實現
示例代碼：github.com/mfaying/les… 演示網址：mfaying.github.io/lesson/cros… (訪問前須要先執行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的新協議。可以實現瀏覽器與服務器全雙工通訊，同時容許跨域，是服務端推送技術的一種很好的實現。
示例代碼：github.com/mfaying/les… 演示網址：mfaying.github.io/lesson/cros…(訪問前須要先安裝依賴包，再執行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. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
- 1. 很是全的跨域實現方案
- 2. 什麼是跨域請求以及實現跨域的方案
- 3. 跨域問題解決方案(HttpClient安全跨域 & jsonp跨域)
- 4. 跨域單點登陸方案實現
- 5. 跨域方案總結與實現
- 6. Angular經過CORS實現跨域方案
- 7. 跨域解決方案及實現
- 8. 跨域解決方案二：使用JSONP實現跨域
- 9. 跨域解決方案一：使用CORS實現跨域
- 10. 常見的跨域解決方案(全)