一、为什么要配置代理
通过配置代理可以解决跨域问题
什么是跨域?
跨域是两个不同端口的服务器进行发送和返回请求
这是因为浏览器为了保护网站不被破坏,开启了同源策略,不同端口服务器进行数据交互
会被浏览器进行拦截
二、怎么解决跨域问题
- 引入cors,并进行注册
但是此方法会使所有服务器都可以成功请求,不会进行限制
- 配置代理
配置代理可以指定对应的服务器允许请求
三、怎么配置代理
在Vue脚手架中配置vue.config.js文件
方法一
module.exports = {
devServer:{
proxy:"http://localhost:8081"
}
}
优点:配置简单,请求资源时直接发给前端(8080)即可
缺点:不能配置多个代理,不能灵活的控制请求是否走代理
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,才会将请求会转发给服务器 (优先匹配前端资源)
方法二
module.exports = {
devServer: {
proxy: {
'/index': { // 匹配所有以 '/index'开头的请求路径
target: 'http://localhost:8081', // 代理目标的基础路径
pathRewrite: {'^/index':''}, // 代理往后端服务器的请求去掉 /index 前缀
ws: true, // 用于WebSocket支持
changeOrigin: true
},
'/num': {
target: 'http://localhost:8082',
pathRewrite: {'^/num': ''},
changeOrigin: true
}
}
}
}
/*
changeOrigin设置为true时,服务器收到的请求头中的host为服务器相同的端口号
changeOrigin设置为false时,服务器收到的请求头中的host为真正的端口号
changeOrigin默认值为true
*/
优点:可以配置多个代理,且可以灵活的控制请求是否走代理
缺点:配置略微繁琐,请求资源时必须加前缀