vue配置代理服务器精讲

如果你的前端应用和后端 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文件后需重启项目 。