vue加跨域代理静态文件404_解决vue本地环境跨域请求正常,版本打包后跨域代理不起作用,请求不到数据的方法——针对vue2.0...

Vue本地开发时通过proxyTable实现跨域,但打包后出现静态文件404问题。解决方案包括使用nginx或设置环境变量动态调整API_HOST。在开发环境设置API_HOST为本地地址,生产环境设置为服务器地址,并在Vue实例中注入baseURL,axios请求时使用该基础URL,确保打包后能正确请求数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题:在本地使用了proxyTable代理可以正常跨域请求后台数据,打包上传后就无法获得后台的json文件。查看了相关资料可以用nginx进行解决。还可以使用命名环境变量,请求的时候进行判断,话不多说上干货

module.exports = merge(prodEnv, {

NODE_ENV: '"development"'

API_HOST:"//localhost:8080/api/"

})

8daa2ba80c54b37e6f32e9a5ae4d44cb.png

module.exports = {

NODE_ENV: '"production"',

API_HOST:'""'

}

82635d52e358422c921502f6a2c69eda.png

let base = process.env.NODE_ENV === 'production' ?'http://192.168.1.252:8080':'http://localhost:8080';

Vue.prototype.baseURL = base;

fd448287793641c1531a8724c20d3af1.png

4、配置完成进行请求  Header.vue

axios.get(this.baseURL + '/api/graphql?', {

params: {

}

}

58051cd965930a2c5ed5159f9c2e3071.png

配置完成打包成功上传部署测试一波了!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值