vue项目配置文件vue.config.js中devServer.proxy 使用说明
devServer.proxy 说明在前后端分离的项目中,通常前端应用和后端API 服务器没有运行在同一个主机上;在开发环境下将API 请求代理到API 服务器可以通过 vue.config.js 中的 devServer.proxy 选项来配置;module.exports = {devServer: {host:'0.0.0.0,port: 2000,open: true,proxy: {'/
·
devServer.proxy 说明
在前后端分离的项目中,通常前端应用和后端API 服务器没有运行在同一个主机上;在开发环境下将API 请求代理到API 服务器可以通过 vue.config.js 中的 devServer.proxy 选项来配置;
module.exports = {
devServer: {
host:'0.0.0.0,
port: 2000,
open: true,
proxy: {
'/api': 'http://localhost:3000',
},
}
}
现在,对 http://localhost:2000/api/users 的请求会将请求代理到 http://localhost:3000/api/users;
如果不需要传递 /api ,则需要重写路径:
module.exports = {
devServer: {
host:'0.0.0.0,
port: 2000,
open: true,
proxy: {
'/api': {
target: `http://localhost:3000`,
pathRewrite: { '^/api': '' },
}
},
disableHostCheck: true
}
}
现在对 http://localhost:2000/api/users 的请求将会代理到 http://localhost:3000/users ;
默认情况下,代理时会保留主机头的来源,可以将changeOrigin 设置为true 以此覆盖此行为;
module.exports = {
devServer: {
host:'0.0.0.0,
port: 2000,
open: true,
proxy: {
'/api': {
target: `http://localhost:3000`,
pathRewrite: { '^/api': '' },
changeOrigin: true,
}
},
disableHostCheck: true
}
}
注意:
在代理请求时,浏览器控制台 NetWork 中显示的请求路径依然是未代理前的路径,即 请求依然 显示为 http://localhost:2000/api/users ;只要保证 请求路径 以/api 开头,这原请求路径将被代理到 目标 路径。
更多推荐
已为社区贡献1条内容
所有评论(0)