一.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,//用于支持websocketchangeOrigin: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.缺点：配置略显繁琐，请求资源时
