Vue之使用proxytable解决跨域问题

03-23· 2分钟

现代的 web 开发一般都是前后端分离，前后端使用 rest api 进行交互，分离使得前后端服务器一般都不在一起，这导致了跨域问题，本文说明在 vue-cli 中解决这一问题。

关于跨域简述

一般来说，浏览器默认是不允许跨域发送请求的，这里面涉及到安全问题，XSS、CSRF等攻击手段都是恶意脚本的跨站访问，所以一般在服务端没有特殊说明的情况下，浏览器都是禁用CORS的。

浏览器如何判断是否是跨域访问呢？这里面就要讲到同源策略。同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则基于互联网的 web 访问安全会受到巨大威胁。可以说 Web 是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

关于同源策略可以参考 MDN 对浏览器的同源策略的说明。

对于跨域问题的详细描述参考 segmentfault 上的 这篇文章。

简单的来说：协议、IP、端口三者都相同，则为同源。不是同源的脚本不能操作其他源下面的对象。

解决方案

同源策略保障了互联网的安全访问，但是却对于前后端分离的应用带来了挑战。幸运的是，现在的解决方案也很多，比如 script 标签、jsonp、后端设置 cors、Nginx 代理转发等等。

在 Vue 中，提供了使用 webpack 的 DevServer 作为开发环境下跨域问题的解决方法，支持所有webpack-dev-server 的选项。

vue-cli 从 3.0 之后隐藏了很多配置文件，因此在我使用的 vue-cli4.2.3 中，参考官方文档，要想配置 proxy，首先需要在根目录下新建 vue.config.js 文件，然后加入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:4000',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

如此在前端所有发往/api 的请求都会转发至后端服务 http://127.0.0.1:4000/api ,问题解决。

前端Vue