之前的文章《淺析Node中zip壓縮和zip解壓縮(附程式碼)》中,給大家介紹了Node中zip壓縮和zip解壓縮指令的使用詳解。以下這篇文章給大家了解WEB前端跨域解決方案,夥伴們來看看。
WEB前端跨域解決方案
跨域定義
廣義的定義:跨域是指一個域下的文檔或腳本試圖去請求另一個網域下的資源。
1、資源跳轉:連結、重定向、表單提交
2、資源嵌入:<link>
、<script></script>
、<img src="/static/imghwm/default1.png" data-src="https://b.chuchur.com/b.html" class="lazy" alt="你值得了解的WEB前端跨域解決方案(程式碼詳解)" >
、<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"; // 传参并指定回调执行函数为callback script.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", // 请求方式为jsonp jsonpCallback: "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://www.chuchur.com/a.html --> <iframe id="iframe" ></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
最後來存取同域所有頁面物件。 網域
,網域 2:b.html
,網域 1:c.html
。
,b.html
不同網域只能透過hash
傳值通訊。
,c.html
也不同網域也只能單項通訊
,c.html
同域,所以c.html
可以透過parent
來存取a.html
頁面物件
:
1、a.html:(www.chuchur.com/a.html) <iframe
id="iframe"
src="http://www.chuchur.org/b.html"
style="display:none; "
></iframe>
<script>
var iframe = document.getElementById("iframe");
// 向b.html传hash值
setTimeout(function () {
iframe.src = iframe.src + "#nick=chuchur";
}, 1000);
// 开放给同域c.html的回调方法
function test(res) {
alert("数据来自c.html ---> " + res);
}
</script>
`
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.html
window.onhashchange = function () {
iframe.src = iframe.src + location.hash;
};
</script>
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>
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.name
iframe.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>
postMessage跨網域
是HTML5 XMLHttpRequest Level 2
中的API
,可以解決以下方面的問題:
頁面和其開啟的新視窗的資料傳遞
多重視窗之間訊息傳遞<p><code>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.com window.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)); // 向前台写cookie res.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, // 修改响应头信息,实现跨域并允许带cookie onProxyRes: 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、前端代码
<div>user input:<input type="text" /></div> <script src="./socket.io.js"></script> <script> var socket = io("http://www.chuchur.org"); // 连接成功处理 socket.on("connect", function () { // 监听服务端消息 socket.on("message", function (msg) { console.log("来自服务器的消息: " + msg); }); // 监听服务端关闭 socket.on("disconnect", function () { console.log("Server socket has closed."); }); }); document.getElementsByTagName("input")[0].onblur = function () { socket.send(this.value); }; </script>
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
则可以实现 不同窗口之间的数据通讯。
【完】
推荐学习:H5视频教程
以上是你值得了解的WEB前端跨域解決方案(程式碼詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

译者 | 李睿审校 | 孙淑娟Web Speech API是一种Web技术,允许用户将语音数据合并到应用程序中。它可以通过浏览器将语音转换为文本,反之亦然。Web Speech API于2012年由W3C社区引入。而在十年之后,这个API仍在开发中,这是因为浏览器兼容性有限。该API既支持短时输入片段,例如一个口头命令,也支持长时连续的输入。广泛的听写能力使它非常适合与Applause应用程序集成,而简短的输入很适合语言翻译。语音识别对可访问性产生了巨大的影响。残疾用户可以使用语音更轻松地浏览

web端指的是电脑端的网页版。在网页设计中我们称web为网页,它表现为三种形式,分别是超文本(hypertext)、超媒体(hypermedia)和超文本传输协议(HTTP)。

docker部署javaweb系统1.在root目录下创建一个路径test/appmkdirtest&&cdtest&&mkdirapp&&cdapp2.将apache-tomcat-7.0.29.tar.gz及jdk-7u25-linux-x64.tar.gz拷贝到app目录下3.解压两个tar.gz文件tar-zxvfapache-tomcat-7.0.29.tar.gztar-zxvfjdk-7u25-linux-x64.tar.gz4.对解

怎么解决高并发大流量问题?下面本篇文章就来给大家分享下高并发大流量web解决思路及方案,希望对大家有所帮助!

区别:1、前端指的是用户可见的界面,后端是指用户看不见的东西,考虑的是底层业务逻辑的实现,平台的稳定性与性能等。2、前端开发用到的技术包括html5、css3、js、jquery、Bootstrap、Node.js、Vue等;而后端开发用到的是java、php、Http协议等服务器技术。3、从应用范围来看,前端开发不仅被常人所知,且应用场景也要比后端广泛的太多太多。

web前端打包工具有:1、Webpack,是一个模块化管理工具和打包工具可以将不同模块的文件打包整合在一起,并且保证它们之间的引用正确,执行有序;2、Grunt,一个前端打包构建工具;3、Gulp,用代码方式来写打包脚本;4、Rollup,ES6模块化打包工具;5、Parcel,一款速度极快、零配置的web应用程序打包器;6、equireJS,是一个JS文件和模块加载器。

和它本身的轻便一样,Bottle库的使用也十分简单。相信在看到本文前,读者对python也已经有了简单的了解。那么究竟何种神秘的操作,才能用百行代码完成一个服务器的功能?让我们拭目以待。1. Bottle库安装1)使用pip安装2)下载Bottle文件https://github.com/bottlepy/bottle/blob/master/bottle.py2.“HelloWorld!”所谓万事功成先HelloWorld,从这个简单的示例中,了解Bottle的基本机制。先上代码:首先我们从b

web浏览器是指“网页浏览器”,是一种用来检索、展示以及传递Web信息资源的应用程序;简单来说就是是用来浏览网络页面的软件。web浏览器主要通过HTTP协议与网页服务器交互并获取网页,这些网页由URL指定,文件格式通常为HTML,并由MIME在HTTP协议中指明。一个网页中可以包括多个文档,每个文档都是分别从服务器获取的。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SublimeText3漢化版
中文版,非常好用

DVWA
Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。