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

本文原创地址：https://blog.youkuaiyun.com/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, '代理之后')
	})
},