配置Vue中的proxyTable解决跨域问题

Vue Axios跨域问题可以通过配置 /config/index.js中的 proxyTable 来解决,改动配置后需要重启项目 (运行npm run dev)

proxyTable: {
	// 所有 /api请求的路由会走这个代理
	'/api': {
	    changeOrigin: true, //跨域
	    target: 'http://www.lihuyong.com/'
	},

	// 所有 /ywapi请求的路由会走这个代理
	'/ywapi': {
	    changeOrigin: true,
	    target: 'http://www.lihuyong.com/',
	    pathRewrite: { //重写路径
	        '^/api': '/abc/xxx' //例如: /api/getuser 会被重写为 /abc/xxx/getuser
	    },
	    onProxyReq: function (proxyReq, req, res) {
	        console.log("原路径:" + req.originalUrl, "代理路径:" + req.path)
	    }
	}
}

这样打包后在生成环境会访问不到接口地址,为了方便打包后去除 ‘/api’,可以把 ‘/api’设成全局,在main.js中添加 Vue.prototype.api = process.env.NODE_ENV === ‘production’ ? ‘ ‘ : ‘/api’,调用接口的时候的url就可以写成api + ‘接口地址’

变个形:

proxyTable: {
     '/api': {
       changeOrigin: true,
         target: 'https://www.lihuyong.com/',
           pathRewrite: {
             '^/api': ''
           }
     }
 }, // 需要使用proxyTable代理的接口(可以跨域)
/* 接口文件 */
let baseurl;

let apiurl = {
    login: "https://www.lihuyong.com/account/login.php",
    getStatus: baseurl + "/userConfig/statusList"
} 

export {
    apiurl
} 


猜你喜欢

发表评论

最新发布