平时在开发中总是会遇到各种跨域问题，一直没有很好地了解其中的原理，以及其各种实现方案。今天在这好好总结一下。

本文完整的源代码请猛戳

博客，建议大家动手敲敲代码。

1、什么是跨域？为什么会有跨域？

一般来说，当一个请求url的协议、域名、端口三者之间任意一个与当前页面地址不同即为跨域。 之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。

为什么会有同源策略呢？ 同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

设想这样一种情况：A网站是一家银行，用户登录以后，又去浏览其他网站。如果其他网站可以读取A网站的 Cookie，会发生什么？

很显然，如果 Cookie 包含隐私（比如存款总额），这些信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。

由此可见，"同源政策"是必需的，否则 Cookie 可以共享，互联网就毫无安全可言了。

同源策略限制内容有：

Cookie、LocalStorage、IndexedDB 等存储性内容DOM 节点AJAX 请求发送后，结果被浏览器拦截了 下面为允许跨域资源嵌入的示例，即一些不受同源策略影响的标签示例：<script src="..."></script>标签嵌入跨域脚本。语法错误信息只能在同源脚本中捕捉到。<link rel="stylesheet" href="...">标签嵌入CSS。由于CSS的松散的语法规则，CSS的跨域需要一个设置正确的Content-Type消息头。不同浏览器有不同的限制： IE, Firefox, Chrome, Safari 和 Opera。<img>嵌入图片。支持的图片格式包括PNG,JPEG,GIF,BMP,SVG<video> 和 <audio>嵌入多媒体资源。<object>, <embed> 和 <applet>的插件。@font-face引入的字体。一些浏览器允许跨域字体（ cross-origin fonts），一些需要同源字体（same-origin fonts）。<frame>和<iframe>载入的任何资源。站点可以使用X-Frame-Options消息头来阻止这种形式的跨域交互。

常见的跨域场景

URL 说明 是否允许通信http://www.domain.com/a.jshttp://www.domain.com/b.js 同一域名，不同文件或路径 允许http://www.domain.com/lab/c.jshttp://www.domain.com:8000/a.jshttp://www.domain.com/b.js 同一域名，不同端口 不允许http://www.domain.com/a.jshttps://www.domain.com/b.js 同一域名，不同协议 不允许http://www.domain.com/a.jshttp://192.168.4.12/b.js 域名和域名对应相同ip 不允许http://www.domain.com/a.jshttp://x.domain.com/b.js 主域相同，子域不同 不允许http://domain.com/c.jshttp://www.domain1.com/a.jshttp://www.domain2.com/b.js 不同域名 不允许
注意:关于跨域，有两个误区： 1、动态请求就会有跨域的问题（错）。跨域只存在于浏览器端，不存在于安卓/ios/Node.js/python/ java等其它环境 2、跨域就是请求发不出去了（错）。跨域请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了

2、跨域的解决方案

2.1、jsonp

jsonp的跨域原理是利用script标签不受跨域限制而形成的一种方案。 下面我们来简单看一下代码实现

<!-- index.html 文件 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><script>var script = document.createElement(script);script.type = text/javascript;// 传参并指定回调执行函数为onBack script.src = http://127.0.0.1:3000/login?user=admin&;callback=onBack;document.head.appendChild(script);// 回调执行函数 function onBack(res) {alert(JSON.stringify(res));}</script></body></html>

node

var qs = require(querystring);var http = require(http);var server = http.createServer();server.on(request, function(req, res) {console.log(req);var params = qs.parse(req.url.split(?)[1]);var fn = params.callback;// jsonp返回设置 res.writeHead(200, { Content-Type: text/javascript });res.write(fn + ( + JSON.stringify(params) + ));res.end();});server.listen(3000);console.log(Server is running at port 3000...);

我们可以看到返回的结果：

优点：兼容性好（兼容低版本IE）缺点：1.JSONP只支持GET请求； 2.XMLHttpRequest相对于JSONP有着更好的错误处理机制

2.2、postMessage

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一。 语法：otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow:指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口;message 属性是要发送的消息，类型为 String、Object (IE8、9 不支持)；data 属性为 window.postMessage 的第一个参数；origin 属性表示调用window.postMessage() 方法时调用页面的当前状态；source 属性记录调用 window.postMessage() 方法的窗口信息;

targetOrigin:属性来指定哪些窗口能接收到消息事件，其值可以是字符串""（表示无限制）或者一个URI。transfer:是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

看一下简单的demo

<!-- index.html 文件 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><h1>AAAAAAAAAAAA</h1><iframe src="http://localhost:4000/b.html" id="frame" onload="load()"></iframe><script>function load(params){let iframe = document.getElementById(frame);iframe.onload = function() {const data = {name: aym};//获取iframe中的窗口,给iframe里嵌入的window发消息 iframe.contentWindow.postMessage(JSON.stringify(data), http://localhost:4000);};// 接收b.html回过来的消息 window.onmessage = function(e){console.log(e.data)}}</script></body></html><!-- b.html 文件 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><h1>BBBBBBBBB</h1><script>window.addEventListener(message, function(e) {console.log(data from domain1 ---> + e.data);let data = JSON.parse(e.data);if (data) {data.number = 16;// 处理后再发回domain1 window.parent.postMessage(JSON.stringify(data), http://127.0.0.1:8080);}}, false);</script></body></html>

2.3、websocket

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。 原生WebSocket API使用起来不太方便，我们使用http://Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。

<!-- index.html 文件 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><div>user input：<input type="text"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js"></script><script>var socket = io(http://127.0.0.1:8080);// 连接成功处理 socket.on(connect, function() {// 监听服务端消息 socket.on(message, function(msg) {console.log(data from server: ---> + msg);});// 监听服务端关闭 socket.on(disconnect, function() {console.log(Server socket has closed.);});});document.getElementsByTagName(input)[0].onblur = function() {socket.send(this.value);};</script></body></html>

node服务端文件

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(hello： + msg);console.log(data from client: ---> + msg);});// 断开处理 client.on(disconnect, function() {console.log(Client socket has closed.);});});

2.4、Node中间件代理

实现原理：同源策略是浏览器需要遵循的标准，而如果是服务器向服务器请求就无需遵循同源策略。

主要访问路径 - 客户端发出请求 - 代理服务接受客户端请求 。 - 大理服务将请求 转发给应用服务器。 - 应用服务器接收到请求代理服务器求情 ，响应数据。 - 代理服务器将响应数据转发给客户端。

实现代码: 前端代码示例：

<!-- index.html 文件 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><h1>1111</h1><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script>$.ajax({url: http://127.0.0.1:3000/login?user=admin&;password=123,success: function(result) {console.log(result)},error: function(msg) {console.log(msg)}})</script></body></html>

代理服务器

var express = require(express);var proxy = require(http-proxy-middleware);var app = express();var options = {dotfiles: ignore,etag: false,extensions: [htm, html],index: false,maxAge: 1d,redirect: false,setHeaders: function (res, path, stat) {res.set(x-timestamp, Date.now())}}app.use(express.static(public, options))app.use(/, proxy({// 代理跨域目标接口 target: http://127.0.0.1:4000,changeOrigin: true,// 修改响应头信息，实现跨域并允许带cookie onProxyRes: function(proxyRes, req, res) {res.header(Access-Control-Allow-Origin, http://127.0.0.1);res.header(Access-Control-Allow-Credentials, true);},// 修改响应信息中的cookie域名 cookieDomainRewrite: 127.0.0.1 // 可以为false，表示不修改}));app.listen(3000);console.log(Proxy server is listen at port 3000...);

应用服务器

// 服务器const http = require("http");const server = http.createServer();const qs = require("querystring");server.on("request", function(req, res) {var params = qs.parse(req.url.split(?)[1]);console.log(req.url, params);// 向前台写 cookie res.writeHead(200, {"Set-Cookie": "l=a123456;Path=/;Domain=127.0.0.1;HttpOnly" // HttpOnly：脚本无法读取 });res.write(JSON.stringify({ data: I LOVE YOU, ...params }));res.end();});server.listen("4000");console.log(listen 4000...)

最终效果

2.5、nginx反向代理

跨域原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。

实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

nginx具体配置：

#proxy服务器server {listen 81;server_name www.domain1.com;location / {proxy_pass http://www.domain2.com:8080; #反向代理proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名index index.html index.htm;# 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用add_header Access-Control-Allow-Origin http://www.domain1.com; #当前端只跨域不带cookie时，可为add_header Access-Control-Allow-Credentials true;}}

Nodejs后台示例：

var http = require(http);var server = http.createServer();var qs = require(querystring);server.on(request, function(req, res) {var params = qs.parse(req.url.split(?)[1]);// 向前台写cookie res.writeHead(200, {Set-Cookie: l=a123456;Path=/;Domain=www.domain2.com;HttpOnly // HttpOnly:脚本无法读取 });res.write(JSON.stringify(params));res.end();});server.listen(8080);console.log(Server is running at port 8080...);

前端代码示例：

var xhr = new XMLHttpRequest();// 前端开关：浏览器是否读写cookiexhr.withCredentials = true;// 访问nginx中的代理服务器xhr.open(get, http://www.domain1.com:81/?user=admin, true);xhr.send();

2.6、CORS

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。 虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。

简单请求 只要同时满足以下两大条件，就属于简单请求 - 1：使用下列方法之一：GET、HEAD、POST - 2：Content-Type 的值仅限于下列三者之一：text/plain、multipart/form-data、application/x-www-form-urlencoded

复杂请求 凡是不同时满足上面两个条件，就属于复杂请求。

复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。

我们用PUT向后台请求时，属于复杂请求，后台需做如下配置：

// 允许哪个方法访问我res.setHeader(Access-Control-Allow-Methods, PUT)// 预检的存活时间res.setHeader(Access-Control-Max-Age, 6)// OPTIONS请求不做任何处理if (req.method === OPTIONS) {res.end()}// 定义后台返回的内容app.put(/getData, function(req, res) {console.log(req.headers)res.end(我不爱你)})

接下来我们看下一个完整复杂请求的例子，并且介绍下CORS请求相关的字段

// index.htmllet xhr = new XMLHttpRequest()document.cookie = name=xiamen // cookie不能跨域xhr.withCredentials = true // 前端设置是否带cookiexhr.open(PUT, http://localhost:4000/getData, true)xhr.setRequestHeader(name, xiamen)xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {console.log(xhr.response)//得到响应头，后台需设置Access-Control-Expose-Headers console.log(xhr.getResponseHeader(name))}}}xhr.send()//server1.jslet express = require(express);let app = express();app.use(express.static(__dirname));app.listen(3000);//server2.jslet express = require(express)let app = express()let whitList = [http://localhost:3000] //设置白名单app.use(function(req, res, next) {let origin = req.headers.originif (whitList.includes(origin)) {// 设置哪个源可以访问我 res.setHeader(Access-Control-Allow-Origin, origin)// 允许携带哪个头访问我 res.setHeader(Access-Control-Allow-Headers, name)// 允许哪个方法访问我 res.setHeader(Access-Control-Allow-Methods, PUT)// 允许携带cookie res.setHeader(Access-Control-Allow-Credentials, true)// 预检的存活时间 res.setHeader(Access-Control-Max-Age, 6)// 允许返回的头 res.setHeader(Access-Control-Expose-Headers, name)if (req.method === OPTIONS) {res.end() // OPTIONS请求不做任何处理 }}next()})app.put(/getData, function(req, res) {console.log(req.headers)res.setHeader(name, jw) //返回一个响应头，后台需设置 res.end(我不爱你)})app.get(/getData, function(req, res) {console.log(req.headers)res.end(我不爱你)})app.use(express.static(__dirname))app.listen(4000)

2.7、location name +iframe

原理：window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在。 下面a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

// a.html(http://localhost:3000/b.html) <iframe src="http://localhost:4000/c.html" frameborder="0" onload="load()" id="iframe"></iframe><script>let first = true// onload事件会触发2次，第1次加载跨域页，并留存数据于window.name function load() {if(first){// 第1次onload(跨域页)成功后，切换到同域代理页面 let iframe = document.getElementById(iframe);iframe.src = http://localhost:3000/b.html;first = false;}else{// 第2次onload(同域b.html页)成功后，读取同域window.name中数据 console.log(iframe.contentWindow.name);}}</script>

b.html为中间代理页，与a.html同域，内容为空。 c页面

// c.html(http://localhost:4000/c.html) <script>window.name = 我不爱你</script>

总结：通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。这个就巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。

2.8、document. hash + iframe

实现原理： a.html欲与c.html跨域相互通信，通过中间页b.html来实现。 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信。

具体实现步骤：一开始a.html给c.html传一个hash值，然后c.html收到hash值后，再把hash值传递给b.html，最后b.html将结果放到a.html的hash值中。 同样的，a.html和b.html是同域的，都是http://localhost:3000;而c.html是http://localhost:4000

// a.html <iframe src="http://localhost:4000/c.html#iloveyou"></iframe><script>window.onhashchange = function () { //检测hash的变化 console.log(location.hash);}</script>// b.html <script>window.parent.parent.location.hash = location.hash//b.html将结果放到a.html的hash值中，b.html可通过parent.parent访问a.html页面 </script>// c.html console.log(location.hash);let iframe = document.createElement(iframe);iframe.src = http://localhost:3000/b.html#idontloveyou;document.body.appendChild(iframe);

2.9、 document.domain + iframe

实现原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域。

该方式只能用于二级域名相同的情况下，比如 a.test.com 和 b.test.com 适用于该方式。 只需要给页面添加 document.domain =test.com 表示二级域名都相同就可以实现跨域。

我们看个例子：页面a.zf1.cn:3000/a.html获取页面b.zf1.cn:3000/b.html中a的值

// a.html<body>helloa<iframe src="http://b.zf1.cn:3000/b.html" frameborder="0" onload="load()" id="frame"></iframe><script>document.domain = zf1.cnfunction load() {console.log(frame.contentWindow.a);}</script></body>// b.html<body>hellob<script>document.domain = zf1.cnvar a = 100;</script></body>

3、总结

日常工作中，用得比较多的跨域方案是cors和nginx反向代理CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。SONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。 后续更多文章将在我的github第一时间发布，欢迎关注。

参考

浏览器同源政策及其规避方法

跨域资源共享 CORS 详解

前端常见跨域解决方案（全）

分类： 教程分享 标签： 暂无标签
版权申明

本文系作者 @河马 原创发布在河马博客站点。未经许可，禁止转载。

评论

暂无评论数据

暂无评论数据

相关推荐

暂无相关推荐
获得点赞 0
文章被阅读 112
最后更新 23-12-03 0:12:01

目录

目录

黔ICP备2022001009号-2