由于同源策略的限制，滿足同源的腳本才可以獲取資源。雖然這樣有助于保障網(wǎng)絡安全，但另一方面也限制了資源的使用。
那么如何實現(xiàn)跨域呢，以下是實現(xiàn)跨域的一些方法。
一、jsonp跨域
原理：script標簽引入js文件不受跨域影響。不僅如此，帶src屬性的標簽都不受同源策略的影響。
正是基于這個特性，我們通過script標簽的src屬性加載資源，數(shù)據(jù)放在src屬性指向的服務器上，使用json格式。
由于我們無法判斷script的src的加載狀態(tài)，并不知道數(shù)據(jù)有沒有獲取完成，所以事先會定義好處理函數(shù)。服務端會在數(shù)據(jù)開頭加上這個函數(shù)名，等全部加載完畢，便會調(diào)用我們事先定義好的函數(shù)，這時函數(shù)的實參傳入的就是后端返回的數(shù)據(jù)了。
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!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
|
1
|
callback({"test": 0}); |
訪問index.html彈窗便會顯示0
該方案的缺點是：只能實現(xiàn)get一種請求。
二、document.domain + iframe跨域
此方案僅限主域相同，子域不同的應用場景。
比如百度的主網(wǎng)頁是www.baidu.com，zhidao.baidu.com、news.baidu.com等網(wǎng)站是www.baidu.com這個主域下的子域。
實現(xiàn)原理：兩個頁面都通過js設置document.domain為基礎主域，就實現(xiàn)了同域，就可以互相操作資源了。
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!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非同源的頁面下設置了window的name屬性，再將iframe指向同源的頁面，此時window的name屬性值不變，從而實現(xiàn)了跨域獲取數(shù)據(jù)。
./parent/index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!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
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!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ī)范支持的任意基本類型或可復制的對象，但部分瀏覽器只支持字符串，所以傳參時最好用JSON.stringify()序列化。
origin： 協(xié)議+主機+端口號，也可以設置為"*"，表示可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"。
getMessageHTML是我們對于要接受信息頁面的引用，可以是iframe的contentWindow屬性、window.open的返回值、通過name或下標從window.frames取到的值。
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!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）
只要在服務端設置Access-Control-Allow-Origin就可以實現(xiàn)跨域請求，若是cookie請求，前后端都需要設置。
由于同源策略的限制，所讀取的cookie為跨域請求接口所在域的cookie，并非當前頁的cookie。
CORS是目前主流的跨域解決方案。
原生node.js實現(xiàn)
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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結合koa2-cors中間件實現(xiàn)
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
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é)議。能夠實現(xiàn)瀏覽器與服務器全雙工通信，同時允許跨域，是服務端推送技術的一種很好的實現(xiàn)。
前端代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
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é)議的一部分。服務器端調(diào)用HTTP接口只是使用HTTP協(xié)議，不存在跨越問題。
實現(xiàn)：通過nginx配置代理服務器（域名與test1相同，端口不同）做跳板機，反向代理訪問test2接口，且可以修改cookie中test信息，方便當前域cookie寫入，實現(xiàn)跨域登錄。
nginx具體配置：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
#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; }} |
到此這篇關于js前端解決跨域的八種實現(xiàn)方案的文章就介紹到這了,更多相關js 跨域內(nèi)容請搜索服務器之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6954610030347812878
