Vue|Vue cli 3.x 版本跨域问题 Vuecli3.x版本跨域问题

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

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

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

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

配置 proxy 首先说一下 proxy 的原理就像其单词是一样的，因为跨域请求拦截是浏览器的行为，而并非服务器的行为，因此，可以尝试通过另一种方式发送请求，比如让一个可请求的中间服务代为发送请求。
作为本篇的主角 vue，cli 3.x 构建的项目一般需要一个 vue.config.js 文件来配合实现 proxy 的功能。
1. 创建 vue.config.js
在 package.json 文件同级目录下，创建 vue.config.js 配置文件（如果已经有了当然就不用创建了）。
【Vue|Vue cli 3.x 版本跨域问题】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 就是受信任的站点
如此，该站点就可以访问此路由了。