Vue cli 3.x 版本跨域问题

前言

首先简单的说一下什么是跨域

1. 跨域首先是出现在浏览器里的，也就是浏览器拦截了跨域请求。
2. 跨域所跨的域（domain）一般来说指：当前要发出的请求其域（协议 + ip地址 + 端口）与本应用的不一样。

本篇只总结了笔者个人所使用过的 2 种经验，至少也是我认为正确的结论分享在此篇。

目录

• 配置 proxy 解决跨域
• 配置白名单解决跨域

配置 proxy

首先说一下 proxy 的原理就像其单词是一样的，因为跨域请求拦截是浏览器的行为，而并非服务器的行为，因此，可以尝试通过另一种方式发送请求，比如让 一个可请求的中间服务代为发送请求。

作为本篇的主角 vue，cli 3.x 构建的项目一般需要一个 vue.config.js 文件来配合实现 proxy 的功能。

1. 创建 vue.config.js

在 package.json 文件同级目录下，创建 vue.config.js 配置文件（如果已经有了当然就不用创建了）。

2. 修改 vue.config.js

主要就是 proxy 里面的东西，其实都可以直接复制，修改一下 target 为实际要请求的地址即可

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  devServer: {
    open: true,
    host: 'localhost',
    port: '8081',
    proxy: {
      '/api': {
        target: 'http://localhost:8082', // 要请求的地址
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

3. axios 使用 proxy

这里的话其实就是注意以下 url 或者说路径就可以了，例如我要用 post 请求 http://localhost:8082/students，这个时候我们就可以这么写：

axios
  .post("/api/students")
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  });

这里这个 /api 就等价于 http://localhost:8082，但最终会被替换为 http://localhost:8081/api/students（我启动的 vue 项目是 8081）

本例子只是为了实验 post 而故意迎合，实际开发中建议 post 做 add 使用

proxy 模式，笔者研究的时间不够长，发布后经常会出现 404 的问题，虽说可以查阅到一些相关资料，但并不是很实用的感觉；总的来说， proxy 模式可能目前在我看来是更偏向于开发期间所使用

配置白名单

该方案也很直白，就是把允许访问的站点配置一下，让他作为可信站点即可。

这通常与 Access-Control-Allow-Origin 联系紧密。

采用这种方案不需要前端做什么，只需要配置一下后端服务即可。

我们用一个 express 的项目为例：

./routes
├── ./routes/index.js
├── ./routes/students.js
└── ./routes/users.js

假如我要给 users.js　这个路由设置白名单，只需要添加一个 router.all 即可

var express = require('express');
var router = express.Router();

router.all('*', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://localhost:8081');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With');
  res.header('Access-Control-Allow-Methods', 'PUT,POST,GET,DELETE,OPTIONS');
  res.header('X-Powered-By', ' 3.2.1');
  res.header('Content-Type', 'application/json;charset=utf-8');
  next();
});

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send(
    JSON.stringify([
      { name: '诸葛亮', gender: '男' },
      { name: '貂蝉', gender: '女' },
      { name: '孙策', gender: '男' }
    ])
  );
});

module.exports = router;

Access-Control-Allow-Origin 后面的 http://localhost:8081 就是受信任的站点

如此，该站点就可以访问此路由了。