跨域 | 小洋空间

跨域

1. 什么是跨域

跨域本质是浏览器基于同源策略的一种安全手段。

同源策略（Same-Origin Policy）是一种约定，它是浏览器最核心也最基本的安全功能。所谓同源（即指在同一个域）必须具有以下三个相同点：

协议相同
主机（域名 / IP）相同
端口相同

反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，就会产生跨域。

2. 如何解决跨域

解决跨域的方法有很多，下面列举几种：

JSONP
CORS
Proxy（代理）
WebSocket
postMessage
document.domain + iframe

在 vue 项目中，我们主要针对 CORS 或 Proxy 这两种方案进行展开。

CORS

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

CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源。只要后端实现了 CORS，就实现了跨域。

以 koa 框架举例：添加中间件，直接设置 Access-Control-Allow-Origin 响应头。

app.use(async (ctx, next) => {
  ctx.set('Access-Control-Allow-Origin', '*')
  ctx.set(
    'Access-Control-Allow-Headers',
    'Content-Type, Content-Length, Authorization, Accept, X-Requested-With, yourHeaderFeild'
  )
  ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS')
  if (ctx.method === 'OPTIONS') {
    ctx.body = 200
  } else {
    await next()
  }
})

Access-Control-Allow-Origin 设置为 * 其实意义不大，实际应用中上线前我们会将其值设为我们目标的 host。

Proxy

代理（Proxy）也称网络代理，是一种特殊的网络服务，允许一个（一般为客户端）通过这个服务与另一个网络终端（一般为服务器）进行非直接的连接。一些网关、路由器等网络设备具备网络代理功能。

方案一：webpack devServer 代理

如果是通过 vue-cli 脚手架工具搭建项目，我们可以通过 webpack 为我们起一个本地服务器作为请求的代理对象。

通过该服务器转发请求至目标服务器，得到结果再转发给前端。但是最终发布上线时，如果 web 应用和接口服务器不在一起仍会跨域。

在 vue.config.js 文件新增以下代码（webpack.config.js 中写法类似）：

module.exports = {
  devServer: {
    host: '127.0.0.1',
    port: 8084,
    open: true,
    proxy: {
      '/api': {
        target: 'http://xxx.xxx.xx.xx:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

通过 axios 发送请求中，配置请求的根路径：

axios.defaults.baseURL = '/api'

方案二：服务端代理（http-proxy-middleware）

此外，还可通过服务端实现代理请求转发。以 express 框架为例：

const express = require('express')
const proxy = require('http-proxy-middleware')
const app = express()
app.use(express.static(__dirname + '/'))
app.use('/api', proxy({ target: 'http://localhost:4000', changeOrigin: false }))
module.exports = app

方案三：Nginx 代理

server {
  listen    80;
  # server_name www.josephxia.com;
  location / {
    root  /var/www/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  location /api {
    proxy_pass  http://127.0.0.1:3000;
    proxy_redirect   off;
    proxy_set_header  Host       $host;
    proxy_set_header  X-Real-IP     $remote_addr;
    proxy_set_header  X-Forwarded-For  $proxy_add_x_forwarded_for;
  }
}