vue中proxy配置及理解
今天被vue中proxy配置困扰了一天,记录一下。项目中需要和两个不同的后台服务器接口进行响应,在开发过程中将第二个服务器接口默认写死了:http://www.beehub.paradeum.com/api/xxx 但是项目在生产环境中面临需要匹配https的情况,不能采用写死请求路径的情况,在项目大佬修改了大佬后终于成功了,代码及使用如下:vue.config.jsproxy:{//change
今天被vue中proxy配置困扰了一天,记录一下。
项目中需要和两个不同的后台服务器接口进行响应,在开发过程中将第二个服务器接口默认写死了:http://www.beehub.paradeum.com/api/xxx 但是项目在生产环境中面临需要匹配https的情况,不能采用写死请求路径的情况,在项目大佬修改之后终于成功了,代码及使用如下:
vue.config.js
proxy: {
// change xxx-api/login => mock/login
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: "http://api.beehub.paradeum.com",
changeOrigin: true,
pathRewrite: {
["^" + process.env.VUE_APP_BASE_API]: ""
}
},
"/gateway": {
target: "http://api2.beehub.paradeum.com",
changeOrigin: true,
secure: false
}
}
},
upload.vue
axios.post('/gateway/api/query', fd, config)
到此,将gateway的请求从localhost代理到了beehub.paradeum.com
理解vue中proxy配置的含义:当我们从localhost:9000请求localhost:3000的数据时,因为浏览器的同源策略,会出现跨域无法成功请求的情况,但是通过运行vue项目而本地开启的node服务器是可以进行请求的,所以我们将localhost:9000的数据请求代理到node本地运行环境中从而进行请求3000端口的数据。
注:vue项目中配置的proxy只是对于开发环境中将的localhost请求代理到www.xxx.com,当项目发布到生产环境则是走nginx代理服务器,项目中的proxy配置无效。
更多推荐
所有评论(0)