跨域

总览

什么是跨域 跨域具体解决办法

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 实施的安全限制

首先狭义的同源就是指，域名、协议、端口均为相同

如果缺少了同源策略，浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个 ip 地址，也非同源。

• 当前域下的 js 脚本不能够访问其他域下的 cookie、localStorage 和 indexDB。
• 当前域下的 js 脚本不能够操作访问操作其他域下的 DOM。
• 当前域下 ajax 无法发送跨域请求。

同源政策的目的主要是为了保证用户的信息安全，它只是对 js 脚本的一种限制，并不是对浏览器的限制

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

跨域解决方案

前端方案

通过 jsonp

JSONP 的原理非常简单，就是 HTML 标签中，很多带 src 属性的标签都可以跨域请求内容，比如我们熟悉的 img 图片标签

jsonp 可以在前端解决跨域问题，但是只是针对于 get 请求

 <script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=handleCallback';
document.head.appendChild(script);
// 回调执行函数
function handleCallback(res) {
  alert(JSON.stringify(res));
}
</script>


// vue.js
this.$http.jsonp('http://www.domain2.com:8080/login', {
  params: {},
  jsonp: 'handleCallback'
}).then((res) => {
  console.log(res);
})

服务端返回如下（返回时即执行 handleCallback 函数）（括号里面的就是我们需要的数据）：

handleCallback({"status": true, "user": "admin"})

jsonp 优点： 简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题 。

jsonp 缺点：仅支持 get 方法具有局限性,不安全可能会遭受 XSS 攻击

postMessage

postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API，且是为数不多可以跨域操作的 window 属性之一，它可用于解决以下方面的问题： a. 页面和其打开的新窗口的数据传递 b. 多窗口之间消息传递 c. 页面与嵌套的 iframe 消息传递 d. 上面三个场景的跨域数据传递

• message: 将要发送到其他 window 的数据。
• targetOrigin:通过窗口的 origin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示无限制）或者一个 URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。
• transfer(可选)：是一串和 message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权

// a.html
  <iframe src="http://localhost:4000/b.html" frameborder="0" id="frame" onload="load()"></iframe>
	//等它加载完触发一个事件
  	//内嵌在http://localhost:3000/a.html
    <script>
      function load() {
        let frame = document.getElementById('frame')
        frame.contentWindow.postMessage('a', 'http://localhost:4000') //发送数据
        window.onmessage = function(e) { //接受返回数据
          console.log(e.data) //b
        }
      }
    </script>

// b.html
<script>
  window.onmessage = function(e) {
    console.log(e.data) //a
    e.source.postMessage('d', e.origin)//
 }
</script>

document.domain

利用document.domain 可以修改 访问页面的域，多用在父子关系的域，子域可以设置 document.domain 等于父域，从而解决同父域跨域问题。

举例子：

www.ios.xingyu.com` 访问 `www.web.xingyu.com` 跨域，可以利用 `document.domain` 设置成 `www.xingyu.com

webpack-dev-server

前端无论是 vue 项目还是 react 项目大多数都会以 webpack-dev-server 来运行，webpack-dev-server 可以设置代理，前端可以在开发环境设置代理解决跨域问题。

 proxy: {
      '/api': {
        target: 'http://localhost:3000',
        pathRewrite: { '^/api': '' },
        changeOrigin: true,
      },
   }

vue-cli、create-react-app、umi 等脚手架找到 webpack devserver 配置位置配上即可。

协议方式

WebSocket 协议

WebSocket protocol 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是 server push 技术的一种很好的实现。

WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

原生 WebSocket API 使用起来不太方便，我们使用 Socket.io，它很好地封装了 webSocket 接口，提供了更简单、灵活的接口，也对不支持 webSocket 的浏览器提供了向下兼容。

// socket.html
<script>
  let socket = new WebSocket('ws://localhost:3000');
  socket.onopen = function () {
    socket.send('heiheihei');//向服务器发送数据
  }
  socket.onmessage = function (e) {
    console.log(e.data);//接收服务器返回的数据
  }
</script>

// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');//记得安装ws
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
  ws.on('message', function (data) {
    console.log(data);
    ws.send('嘿嘿嘿')
  });
})

代理-抓包方式

SwitchyOmega + whistle（针对开发环境）

针对开发环境会跨域，生产环境不会跨域的解决方案

后端方案

跨域资源共享（CORS）

CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的 HTTP 头组成，这些 HTTP 头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。

同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了 web 服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

Koa 设置跨域

koa 是插件机制，设置更简单，使用跨域插件即可。

import cors from 'koa2-cors'
app.use(cors())

代理方案

nginx 代理

实现原理类似于 Node 中间件代理，需要你搭建一个中转 nginx 服务器，用于转发请求。

使用 nginx 反向代理实现跨域，是最简单的跨域方式。只需要修改 nginx 的配置即可解决跨域问题，支持所有浏览器，支持 session，不需要修改任何代码，并且不会影响服务器性能。

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

// 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 中间件代理

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

• 接受客户端请求 。
• 将请求 转发给服务器。
• 拿到服务器 响应 数据。
• 将 响应 转发给客户端。

值得注意的是浏览器向代理服务器发送请求，也遵循同源策略

// server1.js 代理服务器(http://localhost:3000)
const http = require('http')
// 第一步：接受客户端请求
const server = http.createServer((request, response) => {
  // 代理服务器，直接和浏览器直接交互，需要设置CORS 的首部字段
  response.writeHead(200, {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': '*',
    'Access-Control-Allow-Headers': 'Content-Type'
  })
  // 第二步：将请求转发给服务器
  const proxyRequest = http
    .request(
      {
        host: '127.0.0.1',
        port: 4000,
        url: '/',
        method: request.method,
        headers: request.headers
      },
      serverResponse => {
        // 第三步：收到服务器的响应
        var body = ''
        serverResponse.on('data', chunk => {
          body += chunk
        })
        serverResponse.on('end', () => {
          console.log('The data is ' + body)
          // 第四步：将响应结果转发给浏览器
          response.end(body)
        })
      }
    )
    .end()
})
server.listen(3000, () => {
  console.log('The proxyServer is running at http://localhost:3000')
})

// server2.js(http://localhost:4000)
const http = require('http')
const data = { title: 'fontend', password: '123456' }
const server = http.createServer((request, response) => {
  if (request.url === '/') {
    response.end(JSON.stringify(data))
  }
})
server.listen(4000, () => {
  console.log('The server is running at http://localhost:4000')
})

预检请求

当发送跨域请求时，浏览器会先发送一个OPTIONS方法的预检请求，探测服务器是否允许实际请求（POST、GET等）的跨域访问。服务器在接收到这个请求后，会返回一组响应头信息，包含了对CORS的支持情况和允许的请求方法，如果服务器对跨域请求进行了允许，则浏览器才会真正地发送POST请求。如果服务器对预检请求的响应头中拒绝跨域访问或者根本没有任何CORS头信息，浏览器会抛出错误

因此，浏览器需要发送两次请求来确认服务器是否允许跨域请求，并确保安全性。

参考

跨域详解以及前端、后端、运维解决的方法统统写在这里了。-腾讯云开发者社区-腾讯云 (tencent.com) (opens new window)

跨域的十种解决方案 - 掘金 (juejin.cn) (opens new window)

CORS与预检请求 - 掘金 (juejin.cn) (opens new window)