第一种
如果你的前端应用和后端 需要跨域，你需要在开发环境下将 API 请求代理到 API 服务器。可以通过*.config.js中的 devServer.proxy 选项来配置。
devServer: {
open: false, // 编译完成是否打开网页
host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
port: 8080, // 访问端口
https: false, // 编译失败时刷新页面
disableHostCheck: true, // 是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。
hot: true, // 开启热加载
hotOnly: false,
proxy: {
[process.env.VUE_APP_API]: {
// 拦截器(拦截链接中有/api)
target: process.env.VUE_API_DEV_TARGET, // 'http://192.168.1.114:3000', //process.env.VUE_API_DEV_TARGET, //API服务器的地址
changeOrigin: true, // 是否跨域
pathRewrite: {
// '^/api': ''
[`^${process.env.VUE_APP_API}`]: ''
// 配置出来的接口没有 /api
// 比如/api/admin/being/classes/classInfo 会被替代成/admin/being/classes/classInfo
}
}
}
},
PS：devServer.disableHostCheck配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。 DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。 它通常用于搭配–host 0.0.0.0使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。
其中的process.env.Vue_app_API是开发环境文件.env.development中的内容
VUE_APP_API = "/api"
VUE_API_DEV_TARGET = "http://192.168.1.114:3000/" //请求地址
创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_API,
withCredentials: true, // send cookies when cross-domain requests
timeout: 30000, // request timeout
headers: {
"Content-Type": "application/json;"
}
});
-
proxy会拦截所有url中可以成功匹配到 ‘/api’ 的请求。（proxy采用正则匹配，一旦url中包含你要的字符串则停止向下匹配，详查proxy匹配规则）
-
它会把拦截到的请求中的baseUrl替换为此处的target
如，http://192.168.1.114:3000/banner为请求内容的api,
本地项目为http://192.168.1.114:3001/进行访问，这就需要跨域，经过上述配置后。
使用http://192.168.1.114:3001/api/baner请求时，通过devServer.proxy拦截器把http://192.168.1.114:3001/api进行替换成http://192.168.1.114:3000/后加/banner进行请求
api调用
export function getBrainInfo(params) {
return service.request({
url: '/expert/brain',
method: 'get',
params
})
}
第二种
devServer: {
disableHostCheck: true,
open: true,
host: '192.168.1.114', // 本机ip
port: 3001, // 本机端口
https: true,
proxy: 'http://192.168.1.114:3000', // 需代理的地址
before: app => {}
},
参考：
