vue设置代理跨域,vuecli代理跨域原理
本文主要介绍在Vue-Cli中配置代理转发解决跨域问题的方法。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。和有需要的朋友一起学习吧。
目录
集成在vue-cli中的跨域解决方案Vue-CLI解决了跨域配置问题。明基地址重启项目，验证结果汇总。
vue-cli中集成的跨域解决方案
想法：
在前端服务和后端接口服务之间设置一个中间代理服务，其地址保持和前端服务一致，然后：
代理服务和前端服务之间因为协议域名端口统一，不存在跨域问题，代理服务和后端服务之间可以直接发送请求，因为没有通过浏览器同源策略的限制。这样就可以通过中间服务器做接口转发，解决开发环境中的跨域问题，显得比较复杂。其实vue-cli已经为我们内置了这项技术，我们只需要根据需求进行配置即可。
vue-cli解决跨域配置说明
在vue.config.js的配置文件中，有一项是devServer，这是我们接下来操作的主角。
模块.导出={
devServer: {
//.省略
//代理配置
代理服务器：{
//如果请求地址以/api开头，则触发代理机制。
//http://localhost:9588/API/log in-http://localhost:3000/API/log in
/api: {
target: 3358 localhost:3000 //我们要代理的实际接口地址
}
}
}
}
}
基地址
.环境发展
# vue _ app _ base _ API= 3358 localhost:3000/API (不要用这句话)
VUE应用基础应用编程接口=/api
api/user.js
导出函数登录(formData) {
退货请求({
//url: api/sys/login ，
URL:“/sys/log in”，省略//前面的api
方法： POST ，
数据：表单数据
})
}
重启项目，验证结果
修改配置文件后，我们必须重启前端项目，再次测试登录界面。我们发现跨域问题已经解决了。
小结
Vue-cli集成了跨域代理功能-只能用在开发阶段。在vue.config.js文件中，在devServe下配置指定格式的proxy，然后重启项目就够了。特别强调：
ajax的基址baseUrl必须是相对地址，而不是绝对地址。
关于如何配置Vue-Cli的代理转发解决跨域问题的文章到此结束。有关Vue-Cli代理转发的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。