目录Vue-cli中集成的跨域解决方案vue-cli解决跨域配置说明基地址重启项目,验证结果小结vue-cli中集成的跨域解决方案 思路: 在前端服务和后端接口服务之间 架设一个中
思路:
在前端服务和后端接口服务之间 架设一个中间代理服务,它的地址保持和前端服务一致,那么:
这样,我们就可以通过中间这台服务器做接口转发,在开发环境下解决跨域问题,看起来好像挺复杂,其实vue-cli已经为我们内置了该技术,我们只需要按照要求配置一下即可。
在vue.config.js
配置文件中,有一项是devServer,它就是我们下边要操作的主角。
module.exports = {
devServer: {
// ... 省略
// 代理配置
proxy: {
// 如果请求地址以/api打头,就出触发代理机制
// Http://localhost:9588/api/login -> http://localhost:3000/api/login
'/api': {
target: 'http://localhost:3000' // 我们要代理的真实接口地址
}
}
}
}
}
.env.development
# VUE_APP_BASE_API = 'http://localhost:3000/api' (这句不要了)
VUE_APP_BASE_API = '/api'
api/user.js
export function login(fORMData) {
return request({
// url: 'api/sys/login',
+ url: '/sys/login', // 前面的api就省略了
method: 'POST',
data: formData
})
}
特别强调:
ajax的基地址baseUrl必须是相对地址,而不能是绝对地址
到此这篇关于Vue-Cli配置代理转发解决跨域问题的方法的文章就介绍到这了,更多相关Vue-Cli 代理转发跨域内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!
--结束END--
本文标题: Vue-Cli配置代理转发解决跨域问题的方法
本文链接: https://www.lsjlt.com/news/152462.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0