关于vue项目跨域问题

	**在我们开发过程当中经常碰到跨域问题,那么下面就简单说一下在vue项目开发过程中的跨域问题**

在我们开发环境下,在config文件下的index.js下面找到 proxyTable: {}添加如下代码:
/这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22',直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可在这里插入图片描述
建议在src下新建一个api下载好axios
在api下新建index.js 然后引入axios
然后定义一个baseURL 如果是开发环境就使用’/api’因为上面做了代理请求
如果是打包上线就使用自己要访问的接口’http://www.xxx.com
在这里插入图片描述

当然这个有一个弊端就是 后面所有的请求都需要写在api文件下的index.js里面
然后那个页面需要就把那个接口引进去, 例如:登录页面需要获取验证码接口,那么
在登录页面的script标签内 利用import 将其引入
在这里插入图片描述

然后在methods里面需要的话直接调用
在这里插入图片描述
其他接口以此类推

总结:config里面配置跨域,然后所有需要接口都在api的index.js里面写,然后利用import在所需要的页面引入所需要的接口

猜你喜欢

转载自blog.csdn.net/weixin_43888402/article/details/85264759