vue中跨域解决办法

项目在上线之后,前后端的代码放在同一个服务器下面,就不存在跨域的问题。然而在前后端分离的开发中,跨域在所难免。在以前,存在跨域的时候一般都叫后台小伙伴设置,但是vue中提供了一种方法,在前端也可以设置解决跨域的问题。下面给大家介绍一下:

比如我们服务端的地址为http://localhost:3000;而我们开发的地址为http://localhost:8080;由于端口不一致导致了跨域。解决办法:

一、修改config文件夹中index.js文件dev:{。。。}

proxyTable: {
			"/api": {
				target: "http://loacalhost:3000",
				changeOrigin: true,
				pathRewrite: {
					'^/api': ''
				}
			}
		}

二、在main.js中添加HOST

Vue.prototype.HOST = '/api'

然后我们就可以在给后台发送请求时写成:

		created(){
			var url = this.HOST+'/login';
			this.$axios.post(url,{
					username: 'gdou',
					password: '2015116414xx'
			})
			.then(res => {
				console.log(res.data)
			})
			.catch(error => {
				console.log(error)
			})
		}

我们修改了配置文件,别忘了重启服务哦~~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值