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
- 下一篇: 等重构完这系统,我就辞职