一、项目背景简介
如果你是在使用Vue在做前端项目，那么你肯定对Vue和Node的组合不陌生。无论是在实际的项目中还是我们自己做的Demo中，但凡涉及到API接口请求，都会接触到 跨域 这一技术名词。
这篇博客介绍的是如何在Vue + Node项目中解决跨域请求的问题，博客中会介绍两种跨域的设置方案，即前端跨域设置和后端跨域设置。
什么是跨域以及跨域的相关解决方案，相信你多多少少都知道点，毕竟这是前端面试题目中常问到的。这里我就假设大家已经知道什么是跨域了，如果你对跨域还不是很了解，可以在或CSDN搜索跨域相关问题。
其他的不多说，直接开始吧！
二、前端设置跨域
首先我们先说一下如何在前端设置跨域，其实准确来说应该是在前端设置 跨域代理 。在前端设置跨域的时候，我们是在Webpack中进行配置。需要说明的是： Vue-cli 2.x 版本和 Vue-cli 3.0 版本在Webpack的配置上有些不同，我们这里以 Vue-cli 3.0 为例进行介绍：
如果你之前做过Webpack的相关配置，那么在你项目的根目录中肯定会有一个名为 vue.config.js 的文件，如果没有，那就新建一个。注意该文件是在项目的根目录中，也就是和 src文件夹 同级文件夹。
然后直接复制下面这些代码到你的 vue.config.js 文件中，下面对这些代码进行说明。
module.exports = {
// 配置跨域代理
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081', // 你自己的api接口地址
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '/api/',
}
}
}
}
};
上面的代码等同于一下代码：
module.exports = {
// 配置跨域代理
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8081/api', // 你自己的api接口地址
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': '',
}
}
}
}
};
在上述的配置中，我们可以看到两种配置方式的些许不同，这说明跨域代理最终匹配到的api地址是由 target 和 pathRewrite 两个属性共同决定的。
我们在前端设置完成代理之后，就可以跨域请求了，比如下面使用 axios 进行请求的一个例子：
import axios from 'axios';
export default {
data() {
return {}
},
created() {
axios({
method: 'get',
url: "/api/goods"
}).then(data => {
console.log(data);
});
}
};
在我的项目中，前端的端口是 0802 ，后端的端口是 0801 ， 我们可以看到上面我们请求的url是 /api/goods ，经过前端跨域代理的处理之后，最终访问的url是http://localhost:8081/api/goods，这样的话，就解决了跨域的问题。
但是需要注意的是，如果这个时候你在开发者工具中查看自己请求的api地址的时候，看到的是http://localhost:8082/api/goods ，但是不要慌，这是没错的，因为跨域代理是在后台对api地址进行重定向的。
三、后端设置跨域
如果你想问：在前端不进行设置跨域行不行，感觉好麻烦，我就是想简简单单的请求一个自己写的api，有没有其他的办法。办法是有的，也就是下面要说的在后端设置跨域请求。
比如我们在后端使用Node写了一个api，在该api之前进行跨域设置，使得在所有域中都可以访问api，代码如下：
var express = require('express');
var app = express();
// api 返回的结果
const goods = {
name: "goods",
weight: 200
};
// 设置跨域
app.all("*", function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*"); //设置允许跨域的域名，*代表允许任意域名跨域
res.header("Access-Control-Allow-Headers", "content-type"); //允许的header类型
res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS"); //跨域允许的请求方式
if (req.method.toLowerCase() == 'options')
res.send(200); //让options尝试请求快速结束
else
next();
});
app.get('/api/goods', (req, res) => {
res.json({
errno: 200,
data: goods
});
});
var server = app.listen(8081, () => {
var host = server.address().address;
var port = server.address().port;
console.log('Server is running at: http://%s:%s', host, port);
})
这样一来，我们就可以在自己的项目中，请求这个api了，但是要注意的是，这个时候我们需要使用该api的 绝对路径 ，比如下面的请求实例：
import axios from 'axios';
export default {
data() {
return {}
},
created() {
axios({
method: 'get',
url: "http://localhost:8081/api/goods"
}).then(data => {
console.log(data);
});
}
};
四、总结
通过上面的介绍，我们知道现在有两种配置跨域的方法，那么你可能想问在项目中要使用哪一个呢？
我的建议是：两个同时使用。前端使用跨域代理，能够让我们简化我们的api请求路径。
后端设置跨域，可以让我们的api更加便捷，避免出现跨域请求的问题。同时你也可以在后端跨域的设置中，根据实际需求决定在哪些域中可以请求自己写的api，这样更加安全。