vue跨域代理的设置-vue2.5亲测有效

本文原创地址:https://blog.csdn.net/m_uncle/article/details/80734603

假如你要用的接口是:http://jspang.com/DemoApi/oftenGoods.php

第一步:找到config文件夹中的index.js设置pxoxyTable

dev: {
    proxyTable: {
	    '/api': {
		    target: 'http://jspang.com/', // 设置你调用的接口域名
		    changeOrigin: true, // 是否跨域
		    pathRewrite: {
		    '^/api': '/'  // 这里可以理解为用‘/api’来代替target里面的地址,例如我们调用http://jspang.com/DemoApi/oftenGoods.php,直接写成‘/api/DemoApi/oftenGoods.php’就可以了
	    }
    },
}

第二步:开发环境和生产环境的配置

在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"', // 开发环境
  API_HOST: '"/api/"'

})

module.exports = {
  NODE_ENV: '"production"', // 生产环境
  API_HOST: '"http://jspang.com/"'

}

第三步:调用

created() {
	console.log(process.env.NODE_ENV, '环境')
	let urlHost = process.env.API_HOST // 会自动判断当前是开发还是生产环境,然后自动匹配API_HOST
	axios.get(urlHost + 'DemoApi/oftenGoods.php')
	.then((res) => {
		console.log(res, '代理之后')
	})
},
  • 0
    点赞
  • 2
    收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论 2
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值