本文转自:https://www.cnblogs.com/zlfProgrammer/p/7997936.html
在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了。
其实不然,前端也有很多方法可以解决跨域,方便也快捷。
常见的有nginx转发
、node代理
。
在vue
项目中常用的是proxyTable
,这个用起来很方便。
打开config下面的index.js
,找到proxyTable
,添加以下代码即可:
proxyTable: {
'/api': {
target: 'https://baidu.com/api/v1', // 设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '' // 这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add',直接写‘/api/user/add’即可
}
}
},
配置完之后需要重启下项目 npm run dev
重启之后,就可以调用,实现跨域了
具体使用:
在需要调用的接口前加上'/api'
即可
不出意料,点击按钮之后控制台会打印出返回结果
为了方便打包后去除'/api'
,建议把'/api'
设成全局,在main.js
中添加
Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/api'
调用接口的时候的url
就可以写成api + '接口地址'
到此结束,希望有所帮助。