如果你的前端应用和后端 API 服务器没有运行在同一个主机上(跨域),你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js
中的 devServer.proxy
选项来配置。
devServer.proxy
可以是一个指向开发环境 API 服务器的字符串:
module.exports = {
devServer: {
proxy: 'http://localhost:5000'
}
}
这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理 http://localhost:5000
。
用于测试的node服务器(请求之后返回一些人员信息,端口号为5000)
//引入 express
const express = require('express')
//实例化 express
const app = express()
//解析json字符串
app.use(express.json())
app.use(express.urlencoded({ extended:false }))
app.get('/test',(req,res)=>{
res.send([
{name:'小明',age:18},
{name:'小花',age:20}
])
})
app.listen(5000,()=>{
console.log('服务器已启动:http://127.0.0.1:5000');
})
向服务器发送请求
axios.get('/test').then(
response=>{
console.log(response.data)
},
)
当然路径也可写为http://localhost:8080/test,如果写http://127.0.0.1/test会报错
流程
1.当静态文件夹public找不到test时,就走代理,实际请求地址为 http://localhost:5000/test
浏览器输出内容为:
2.当静态文件夹public能找到test时,不走代理,如下:
浏览器输出内容为index.html的内容
方法二
带前缀的
axios.get('http://localhost:8080/api1/test').then(
response=>{
console.log(response.data)
},
)
devServer: {
proxy: {
'/api1': { // 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''} //将/api1替换成空字串,实际请求地址不会带上该路径
},
'/api2': { // 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
// changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
// changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
浏览器依然正常输出
记得请求的地址写本机就行,千万不要写实际的请求的地址,配置了代理后,会自动给你代理到你所请求的服务器地址,且修改了vue.config.js文件后需重启项目 。