Vue CLI3本地调试时,设置代理解决跨域问题

  1. axios请求不要设置baseURL;
  2. 在vue.config.js中进行如下配置:
    module.export = {
    	derServe: {
    		proxy: {
    		    '/believeapi': {
    			      target: 'https://client.be.gz.sulink.cn', // 要代理的地址
    			      changeOrigin: true, //允许跨域
    			      secure: false,  // 如果是https接口的话,需要配置这个参数
    			      pathRewrite: { },  //重写接口
    			      ws: false
    		    }
    		 }
    	}
    }
    

第一步不设置baseURL,使得请求的时候直接使用本机ip;
第二步接口以 /believeapi开头的请求,会被代理请求到 https://client.be.gz.sulink.cn/believeapi;
也就是首先本地请求本机,不跨域;然后请求被代理到真正的服务器地址,从而解决了本地直接请求跨域的问题。

如果需要打包发布到测试或生产环境,这种配置代理的方式是无效的。原因是:webpack-dev-serve起的是本地服务,打包发布到线上自然是无效的。可以让后端配置一个nginx代理。

猜你喜欢

转载自blog.csdn.net/wsln_123456/article/details/108724922
今日推荐