WEB 前端跨域解决方案
跨域定義
廣義的定義：跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源。
1.) 資源跳轉： 鏈接、重定向、表單提交?
2.) 資源嵌入： <link>、<script>、<img>、<frame>等dom標簽，還有樣式中background:url()、@font-face()等文件外鏈
3.) 腳本請求： js發起的ajax請求、dom和js對象的跨域操作等
同源策略
同源策略/SOP（Same origin policy）是一種約定，由Netscape公司1995年引入瀏覽器，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊。所謂同源是指"協議+域名+端口"三者相同，即便兩個不同的域名指向同一個ip地址，也非同源。
同源策略限制以下幾種行為：?
1.) Cookie、LocalStorage 和 IndexDB 無法讀取
2.) DOM 和 Js對象無法獲得?
3.) AJAX 請求不能發送
跨域解決方案
1）jsonp跨域
關于jsonp的原理把握一下幾點：
1）html標簽的src屬性沒有同源限制（支持跨域），瀏覽器解析script標簽時，會自動下載src屬性值（url）指向的資源；
2）script標簽指向的資源文件被下載后，其中的內容會被立即執行；
3）服務器端的程序會解析src屬性值中的url傳遞的參數，根據這些參數針對性返回一個/多個函數調用表達式，這些函數調用表達式的參數就是客戶端跨域想得到的數據；
4）服務器生成、返回的文件中，表達式調用的函數是已經在本地提前定義好的，而參數就是希望從跨域服務器拿到的數據。字面的script標簽可以，動態添加到dom樹中的script也可以，后者更方便綁定事件。
5）只能實現get，也是他的弱點
實現：
// 服務端返回： test({code:0,message:'成功'})// 原生js<script>var script = document.createElement('script');script.type = 'text/javascript';// 傳參并指定回調執行函數為callbackscript.src = 'http://www.chuchur.com/login?callback=test';document.head.appendChild(script);// 回調執行函數function test(res) {console.log(JSON.stringify(res));}</script>//jquery ajax： $.ajax({url: 'http://www.chuchur.com/login',type: 'get',dataType: 'jsonp', // 請求方式為jsonpjsonpCallback: "test", // 自定義回調函數名data: {} });//vue.js this.$http.jsonp('http://www.chuchur.com/login', {params: {},jsonp: 'test' }).then((res) => {console.log(res); })2）document.domain + iframe跨域
原理：
這種方案只限于主域相同，子域不同的情況，其原理就是 兩個頁面通過js強制設置window.domain 為主域，這樣就實現了同域。
實現：
<!-- 父窗口 https://chuchur.com/a.html --> <iframe id="iframe" src="https://b.chuchur.com/b.html"></iframe> <script>document.domain = 'chuchur.com';var user = 'chuchur'; </script> <!-- 子窗口 https://b.chuchur.com/b.html --> <script>document.domain = 'chuchur.com';// 獲取父窗口中變量alert('從父窗口取得數據' + window.parent.user); </script>3）location.hash + iframe跨域
原理：
其原理就是通過URL傳值，然后監聽其hash值的變化，然后通過中間層做跳板，再利用父子窗口js parent 最終來訪問同域所有頁面對象。
域1: a.html ，域2:b.html ，域1:c.html 。
a.html，b.html不同域只能通過 hash傳值通訊。
b.html，c.html也不同域 也只能單項通訊
a.html，c.html同域，所以c.html可以通過parent 來訪問a.html 頁面對象
實現：
1.）a.html：(www.chuchur.com/a.html)
2.）b.html：(www.chuchur.org/b.html)
<iframe id="iframe" src="http://www.chuchur.com/c.html" style="display:none;"></iframe> <script>var iframe = document.getElementById('iframe');// 監聽a.html傳來的hash值，再傳給c.htmlwindow.onhashchange = function () {iframe.src = iframe.src + location.hash;}; </script>3.）c.html：(www.chuchur.com/c.html)
<script>// 監聽b.html傳來的hash值window.onhashchange = function () {// 再通過操作同域a.html的js回調，將結果傳回window.parent.parent.test('你好: ' + location.hash.replace('#nick=', ''));}; </script>4）window.name + iframe跨域
原理：
利用window.name特有屬性，name值在不同的頁面甚至不同域 ，當頁面重新加載后依然存在，并且支持非常長的值，約2MB。
實現：
// 1.）a.html：(www.chuchur.com/a.html) var proxy = function(url, callback) {var state = 0;var iframe = document.createElement('iframe');// 加載跨域頁面 ，先讓頁面的name執行賦值，iframe.src = url;// onload事件會觸發2次，第1次加載跨域頁，并留存數據于window.nameiframe.onload = function() {if (state === 1) {// 第2次onload(同域proxy頁)成功后，讀取同域window.name中數據test(iframe.contentWindow.name);destoryFrame();} else if (state === 0) {// 第1次onload(跨域頁)成功后，切換到同域代理頁面iframe.contentWindow.location = 'http://www.chuchur.com/b.html';state = 1;}};document.body.appendChild(iframe);// 獲取數據以后銷毀這個iframe，釋放內存；這也保證了安全（不被其他域frame js訪問）function destoryFrame() {iframe.contentWindow.document.write('');iframe.contentWindow.close();document.body.removeChild(iframe);} };// 請求跨域b頁面數據 proxy('http://www.domain2.com/b.html', function(data){alert(data); }); // 2.）proxy.html：(www.chuchur.com/proxy.html）,這個頁面可以什么都不寫，但是要保證能正常訪問// 3.）b.html：(www.chuchur.org/b.html) <script>window.name = '我是一個可以非常長的變量'; </script>5）postMessage跨域
postMessage是HTML5 XMLHttpRequest Level 2中的API，可以解決以下方面的問題：
a.） 頁面和其打開的新窗口的數據傳遞
b.） 多窗口之間消息傳遞
c.） 頁面與嵌套的iframe消息傳遞
d.） 上面三個場景的跨域數據傳遞
用法： postMessage(data,origin)方法接受兩個參數?
data： html5規范支持任意基本類型或可復制的對象，但部分瀏覽器只支持字符串，所以傳參時最好用JSON.stringify()序列化。
origin： 協議+主機+端口號，也可以設置為"*"，表示可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"。
實現：
<!-- 1.）a.html：(www.chuchur.com/a.html) --> <iframe id="iframe" src="http://www.chuchur.com/b.html" style="display:none;"></iframe> <script> var iframe = document.getElementById('iframe');iframe.onload = function() {var data = { name: '邱秋'};// 向chuchur.org傳送跨域數據iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.chuchur.org');};// 接受chuchur.org返回數據window.addEventListener('message', function(e) {alert('我來自chuchur.org： ' + e.data);}, false); </script> <!-- 2.）b.html：(www.chuchur.org/b.html) --> <script>// 接收chuchur.com的數據window.addEventListener('message', function(e) {alert('我來自chuchur.com ' + e.data);var data = JSON.parse(e.data);if (data) {data.nick = chuchur;// 處理后再發回chuchur.comwindow.parent.postMessage(JSON.stringify(data), 'http://www.chuchur.org');}}, false); </script>6）跨域資源共享（CORS）
原理：
普通跨域請求：只服務端設置Access-Control-Allow-Origin即可，前端無須設置。?
帶cookie請求：前后端都需要設置字段，另外需注意：所帶cookie為跨域請求接口所在域的cookie，而非當前頁。 目前，所有瀏覽器都支持該功能(IE8+：IE8/9需要使用XDomainRequest對象來支持CORS）)，CORS也已經成為主流的跨域解決方案。
實現：
//1）原生js var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容// 前端設置是否帶cookie xhr.withCredentials = true; xhr.open('post', 'http://www.chuchur.com/login', true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send('user=chuchur'); xhr.onreadystatechange = function() {if (xhr.readyState == 4 && xhr.status == 200) {alert(xhr.responseText);} }; //2.）jQuery ajax $.ajax({...xhrFields: {withCredentials: true // 前端設置是否帶cookie},crossDomain: true, // 會讓請求頭中包含跨域的額外信息，但不會含cookie... }); //3.）vue框架在vue-resource封裝的ajax組件中加入以下代碼： Vue.http.options.credentials = true//后臺服務端 //java /** 導入包：import javax.servlet.http.HttpServletResponse;* 接口參數中定義：HttpServletResponse response*/ response.setHeader("Access-Control-Allow-Origin", "http://www.chuchur.com"); // 若有端口需寫全（協議+域名+端口） response.setHeader("Access-Control-Allow-Credentials", "true");//node var server = http.createServer(); server.on('request', function(req, res) {var postData = '';// 數據塊接收中req.addListener('data', function(chunk) {postData += chunk;});// 數據接收完畢req.addListener('end', function() {postData = qs.parse(postData);// 跨域后臺設置res.writeHead(200, {'Access-Control-Allow-Credentials': 'true', // 后端允許發送Cookie'Access-Control-Allow-Origin': 'http://www.chuchur.com', // 允許訪問的域（協議+域名+端口）'Set-Cookie': 'l=abcdef;Path=/;Domain=www.chuchur.com;HttpOnly' // HttpOnly:腳本無法讀取cookie});res.write(JSON.stringify(postData));res.end();}); }); server.listen('3000');7）nginx反向代理跨域
瀏覽器跨域訪問js、css、img等常規靜態資源被同源策略許可，但iconfont字體文件(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜態資源服務器中加入以下配置。?
location / { add_header Access-Control-Allow-Origin *; }原理：
通過nginx代理一個 同域不同端口的跳板機，反向代理要跨域的域名，這樣可以修改cookie里面的domain信息實現跨域
實現：
// nginx具體配置： server {listen 80;server_name www.chuchur.com;location / {proxy_pass http://www.chuchur.org; #反向代理proxy_cookie_domain www.chuchur.org www.chuchur.com; #修改cookie里域名index index.html index.htm;# 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用add_header Access-Control-Allow-Origin http://www.chuchur.com; #當前端只跨域不帶cookie時，可為*add_header Access-Control-Allow-Credentials true;} }前端實現
var xhr = new XMLHttpRequest(); // 前端開關：瀏覽器是否讀寫cookie xhr.withCredentials = true; // 訪問nginx中的代理服務器 xhr.open('get', 'http://www.chuchur.com/?user=chuchur', true); xhr.send();// node var http = require('http')； var server = http.createServer(); var qs = require('querystring'); server.on('request', function(req, res) {var params = qs.parse(req.url.substring(2));// 向前臺寫cookieres.writeHead(200, {'Set-Cookie': 'l=abcdef;Path=/;Domain=www.chuchur.org;HttpOnly' // HttpOnly:腳本無法讀取});res.write(JSON.stringify(params));res.end(); }); server.listen('8080');8）Nodejs中間件代理跨域
原理同nignx代理跨域類似，都是通過代理服務器實現數據轉發
實現：
//1）利用中間件http-proxy-middleware實現 var express = require('express'); var proxy = require('http-proxy-middleware'); var app = express();app.use('/', proxy({// 代理跨域目標接口target: 'http://www.chuchur.org:',changeOrigin: true,// 修改響應頭信息，實現跨域并允許帶cookieonProxyRes: function(proxyRes, req, res) {res.header('Access-Control-Allow-Origin', 'http://www.chuchur.com');res.header('Access-Control-Allow-Credentials', 'true');},// 修改響應信息中的cookie域名cookieDomainRewrite: 'www.chuchur.com' // 可以為false，表示不修改 }));app.listen(3000); //2）利用中間件 webpack-dev-server實現 //webpack.config.js部分配置： module.exports = {entry: {},module: {},...devServer: {historyApiFallback: true,proxy: [{context: '/login',target: 'http://www.chuchur.org', // 代理跨域目標接口changeOrigin: true,cookieDomainRewrite: 'www.chuchur.com' // 可以為false，表示不修改}],noInfo: true} }9）WebSocket協議跨域
WebSocket protocol是HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通信，同時允許跨域通訊，是server push技術的一種很好的實現。原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。
實現：
1.）前端代碼：
2.）Nodejs socket后臺：
var http = require('http'); var socket = require('socket.io');// 啟http服務 var server = http.createServer(function(req, res) {res.writeHead(200, {'Content-type': 'text/html'});res.end(); });server.listen('8080'); console.log('Server is running at port 8080...');// 監聽socket連接 socket.listen(server).on('connection', function(client) {// 接收信息client.on('message', function(msg) {client.send('哈哈：' + msg);console.log('來自客服端的消息': ---> ' + msg);});// 斷開處理client.on('disconnect', function() {console.log('Client socket has closed.'); }); });以上9種方式都能實現跨域數據傳遞，用的最多的還是 第六種 跨域資源共享（CORS），在前后端分離開發模式最常見。第七種和第八種中間件代理實現方式則是在基于node開發種常用的
其中第二，三、四、五種方案 ，利用ifame 和 postMessage 則可以實現 不同窗口之間的數據通訊。
【完】
轉載于:https://www.cnblogs.com/chuchur/p/9399616.html
總結
以上是生活随笔為你收集整理的WEB 前端跨域解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux环境安装nagiosgraph
- 下一篇： 等重构完这系统，我就辞职