您现在的位置是:首页 > Javascript
当前栏目
vue脚手架配置代理解决跨域问题
2023-04-18 16:13:44 时间
方法一
在vue.config.js中添加如下配置:
devServer:{
proxy:"http://localhost:5000"
}
说明:
- 优点:配置简单,请求资源时直接发给前端(8080)即可。
- 缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
- 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端资源)
方法二
编写vue.config.js配置具体代理规则:
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true
*/
说明:
- 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
- 缺点:配置略微繁琐,请求资源时必须加前缀。
相关文章
- 2023年度数学建模竞赛汇总
- 计算机网络概述
- 『C/C++养成计划』C++中的双冒号::名解析(Scope Resolution Operator)
- 为什么拔掉计算机网线还能ping通127.0.0.1?
- 蓝桥杯刷题第九天
- 蓝桥杯刷题冲刺 | 倒计时28天
- 蓝桥杯刷题第七天
- Springboot自动装配的原理
- 蓝桥杯-李白打酒加强版
- 2023上半年数学建模竞赛汇总(报名时间、比赛时间、难易程度、含金量、竞赛官网)
- Vue3 中组件的使用(下)
- 【SpringBoot】一文了解SpringBoot配置高级
- 第一章 计算机视觉概述
- Flask
- TypeScript快速上手语法+结合vue3用法
- Synology搭建Gitea(Docker)
- 为什么程序员喜欢这些键盘?
- 【linux】Linux基本指令(上)
- 内含18禁~~关于自学\跳槽\转行做网络安全行业的一些建议
- 14个你需要知道的实用CSS技巧