一,概念
- 为什么要配置代理服务器,因为在请求数据时,会产生跨域问题,为什么会产生跨域问题,因为违反了浏览器的同源策略,什么是同源策略,同源策略指点是,‘同一协议名(http或httqs) 同一域名(localhost),同一端口号’,
- 什么是代理服务器 :
就是在你本机开启一个服务器,这个服务器和你的浏览器(同源)你发送请求给这个代理服务器发,代理服务器收到请求后,就直接转发给你真正请求的服务器,如下图
二,配置单个代理服务器
- 创建
// 和src平级目录下建立一个vue.config.js在里面
module.exports = {
devServer:{
// 开启后需要重启服务器
proxy:"http://localhost:5000"
}
- 使用
// http://localhost:8080/students 如果public文件里有这个students就不会请求 (缺点)
axios.get("http://localhost:8080/students").then(
// 成功了response
response=>{
// 成功了返回的是 response 响应对象 响应对象里的data才是数据
console.log("请求成功了",response.data);
},
// 失败了 error
error=>{
// 失败了返回的是 error 响应对象 响应对象里的message才是错误的原因
console.log("请求失败了",error.message);
}
)
}
三 ,配置多个代理服务器
- 创建:在src平级目录下建立一个vue.config.js在里面
//在src平级目录下建立一个vue.config.js在里面
module.exports = {
devServer:{
proxy:{
"/atguigu":{
target:"http://localhost:5000",
// 因为这个路径http://localhost:5000 发送请求的时候会改成 http://localhost:5000/atguigu 所以要用pathRewrite重写路径
pathRewrite:{"^/atguigu":""},
ws:true, //用于支持websocket
changeOrigin:true//用于控制请求头中的host值 // true为8080,false为你 "atguigu":"http://localhost:5000",的端口号
},
"/demo":{
target:"http://localhost:5001",
// 因为这个路径http://localhost:5000 发送请求的时候会改成 http://localhost:5000/atguigu 所以要用pathRewrite重写路径
pathRewrite:{"^/demo":""},
ws:true, //用于支持websocket
changeOrigin:true//用于控制请求头中的host值 // true为8080,false为你 "atguigu":"http://localhost:5000",的端口号
},
}
}
})
}
- 使用
getStudents(){
// http://localhost:8080/students 如果public文件里有这个students就不会请求 (缺点)
axios.get("http://localhost:8080/atguigu/students").then(
// 成功了response
response=>{
// 成功了返回的是 response 响应对象 响应对象里的data才是数据
console.log("请求成功了",response.data);
},
// 失败了 error
error=>{
// 失败了返回的是 error 响应对象 响应对象里的message才是错误的原因
console.log("请求失败了",error.message);
}
)
},
getCars(){
console.log(111);
// http://localhost:8080/students 如果public文件里有这个students就不会请求 (缺点)
axios.get("http://localhost:8080/demo/cars").then(
// 成功了response
response=>{
// 成功了返回的是 response 响应对象 响应对象里的data才是数据
console.log("请求成功了",response.data);
},
// 失败了 error
error=>{
// 失败了返回的是 error 响应对象 响应对象里的message才是错误的原因
console.log("请求失败了",error.message);
}
)
}
}