vue-cli+webpack-simple创建项目访问后台(跨域问题解决)

在网上找了很多都是webpack在config目录下的index.js里面代码,这里总结了一个webpack-simple跨域的问题,在webpack.config.js的devServer中配置:

	devServer:{
		port: 8080,//自己项目的端口
	    host: 'localhost',//自己项目的地址(注意:这里不要加http协议)
	    proxy: {
	      '/api/*': {//匹配根路径
	        target: 'http://192.168.x.xxx:xxxx',//跨域要访问的地址及端口
	        changeOrigin: true,
	        secure: false,
	      }
	    }
	}

如果用的事axios访问后台的话,倘若同时请求多个接口,也会出现代理失败的问题,这里分享一个解决方法:

	axios.all([
	      axios.post('/user1'),
	      axios.post('/user2'),
	      axios.post('/user3')
	])
	.then(axios.spread(function (cpResp, cgResp, pdResp) {
	      //回调
	 }));

同时,后台配置(java写法)

		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("content-type", "text/html; charset=UTF-8");

注意:

  1. '/api/*'表示 ‘/api’ 请求都会被代理到 target: http://192.168.x.xxx:xxxx 中,如:localhost:8080/api/test会被代理到:http://192.168.x.xxx:xxxx/api/test;
  2. target里面一定要把http带上,我就是没带http然后搞了大半天!
  3. 如果有其他的方法大家可以留言交流。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值