前言
跨域一直是一个在开发中很让人头疼的问题,解决跨域的方式有很多,后端和前端都有自己的解决方式,后端的话主要是在响应头里面添加信息,而前端主要是以代理的方式去进行解决,说白了就是将我们发送的请求交给跟我们同源的服务器,然后由他来做一个中转。其实,vue的代理是 借助vue静态服务器来实现的,使用的是 http-proxy-middleware 这个模块。
原理大概就是这样,配置起来其实还是蛮简单的。
在vue.config.js中配置
假设我们的项目运行在localhost:3000上,现在我们想发送请求到localhost:8000
module.exports = {
proxy: {
"/api": {
// 以 “/api” 开头的 代理到 下边的 target 属性 的值 中
target: http://localhost:8000,
changeOrigin: true, // 是否改变域名
ws: true,
pathRewrite: {
// 路径重写(以正则的规则去写)
"^/api": ""
}
}
}
};
注意:关于路径重写,它的作用我们可以举一个例子来理解,上面我们配置的代理,会将所有已/api开头的请求给拦截,由代理服务器发送到8000端口上,这个/api是为了让我们区分请求是否需要代理而加上去的,8000端口上的实际接口倘若不是以/api开头的话,那么必然会报404,所以我们要将/api给替换为空字符串才可以
当我们需要向多台服务器进行代理时,可按照以下方式配置代理
module.exports = {
proxy: {
"/api1": {
// 以 “/api1” 开头的 代理到 下边的 target 属性 的值 中
target: http://localhost:8000,
changeOrigin: true, // 是否改变域名
ws: true,
pathRewrite: {
// 路径重写(以正则的规则去写)
"^/api1": ""
}
},
"/api2": {
// 以 “/api2” 开头的 代理到 下边的 target 属性 的值 中
target: http://localhost:8001,
changeOrigin: true, // 是否改变域名
ws: true,
pathRewrite: {
// 路径重写(以正则的规则去写)
"^/api2": ""
}
}
}
};