一.vue配置代理服务器解决跨域方法一
过程如图：
1.在配置文件中设置代理服务器的地址
//vue.config.js
module.exports={
pages:{
index:{
// 入口
entry:'src/main.js',
},
},
lintOnSave:false, //关闭语法检测
// 开启代理服务器
devServer:{
proxy:'http://localhost:8000'
//向服务器8000请求，代理服务器本身和vue一样是8080
}
}
2.在vue文件中使用axios请求
<template>
<div>
<button @click="getStudents">获取学生信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default({
name:'App',
data(){
return{
isShow:true,
msg:'你好啊！'
}
},
methods: {
getStudents(){
axios.get('http://localhost:8080/student').then(
response=>{
console.log('请求成功了',response.data)
},
error=>{
console.log('请求失败了',error.message)
}
)
}
},
})
</script>
<style scoped>
</style>
3.node服务器文件
//未设置cros
const { response } = require('express');
const express=require('express');
const { request } = require('express');
const app=express();
app.get('/student',(request,response)=>{
const data={
name:'tom',
gender:'male',
age:18,
}
response.send(JSON.stringify(data));
})
app.listen(8000,()=>{
console.log('服务已经启动，8000端口监听中')
})
如图：
注意：代理服务器不是什么问题都向服务器请求的，如果本地拥有与请求同名的资源，会返回本地资源。
二.配置代理方法二
#server1.js
const { response } = require('express');
const express=require('express');
const { request } = require('express');
const app=express();
app.use((request,response,next)=>{
console.log('有人请求服务器1了');
console.log("请求的资源是：",request.url);
next();
})
app.get('/student',(request,response)=>{
const data={
name:'tom',
gender:'male',
age:18,
}
response.send(JSON.stringify(data));
})
app.listen(8000,()=>{
console.log('服务已经启动，8000端口监听中')
})
#server2.js
const { response } = require('express');
const express=require('express');
const { request } = require('express');
const app=express();
app.use((request,response,next)=>{
console.log('有人请求服务器2了');
console.log("请求的资源是：",request.url);
next();
})
app.get('/car',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
const data={
name:'宝马',
piece:100000,
year:'2020'
}
response.send(JSON.stringify(data));
})
app.listen(8001,()=>{
console.log('服务已经启动，8001端口监听中')
})
#vue.config.js
module.exports={
pages:{
index:{
// 入口
entry:'src/main.js',
},
},
lintOnSave:false, //关闭语法检测
// 开启代理服务器(方式2)
devServer:{
proxy:{
'/next':{
target:"http://localhost:8000",
pathRewrite:{'^/next':''}//将请求url中的/next替换为空串
},
'/demo':{
target:'http://localhost:8001',
pathRewrite:{'^/demo':''},
ws:true,//用于支持websocket
changeOrigin:true,//用于控制请求头中的host值
}
}
}
}
//app.vue
<template>
<div>
<button @click="getStudents">获取学生信息</button>
<button @click="getCars">获取汽车信息</button>
</div>
</template>
<script>
import axios from 'axios'
export default({
name:'App',
data(){
return{
isShow:true,
msg:'你好啊！'
}
},
methods: {
getStudents(){
axios.get('http://localhost:8080/next/student').then(
response=>{
console.log('请求成功了',response.data)
},
error=>{
console.log('请求失败了',error.message)
}
)
},
getCars(){
axios.get('http://localhost:8080/demo/car').then(
response=>{
console.log('请求成功了',response.data)
},
error=>{
console.log('请求失败了',error.message)
}
)
}
},
})
</script>
<style scoped>
</style>
如图：
三.vue脚手架配置两种方法总结
方法一总结：
在vue.config.js中添加如下配置：
devServer:{
proxy:'协议:路径：目标端口'
//如：proxy:'http://localhost:5000'
}说明：
1.优点：配置简单，请求资源时直接发给前端即可
2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理
3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）
方法二总结：
在vue.config.js具体配置规则
module.exports={
devSever:{
proxy:{
'api1':{//匹配所有以'api1开头的请求路径'
target:'协议：路径：目标端口',//代理目标的基础路径
changeOrgin:true,
pahRewrite:('^/api1':'')
},
'api1':{//匹配所有以‘api2’开头的请求路径
target:'协议：路径：目标端口',//代理目标的基础路径
changeOrgin:true,
pahRewrite:('^/api2':'')
}
}
}
}
//changeOrigin设置为true，服务器收到的请求头中的host为：服务器相同的host端口
//changeOrigin设置为false时，服务器收到的请求头的host为为发出请求的host端口说明：
1.优点：可以配置多个代理，且可以灵活的控制代理是否走代理
2.缺点：配置略显繁琐，请求资源时
