应用背景
当我们在使用脚手架创建一个简单的前端项目时,可能会使用很多的三方服务。如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。在开发环境下,vue脚手架会有一个代理的功能,在vue.config.js中设置跨域,即可实现。
示例代码:
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'开头的请求路径
target: 'http://localhost:5000',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: 'http://localhost:5001',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
但是问题来了,当你打包完项目,需要运行项目,我们需要有一个服务器来运行项目,常见的应该是使用tomcat,nginx,或者使用node创建一台服务器运行项目。
- 如果使用tomcat运行该前端项目的话,因为tomcat只是创建一台服务器,不能转发请求,所以当使用tomcat来运行该项目的话,会出现404码,请求三方服务,地址前缀是本地服务器,这根本行不通。
- 所以,我们就必须要想到使用nginx,恰好可以完美的解决这个问题,当你请求三方接口时,可以使用nginx反向代理,将不同的三方请求代理到相对应的主机上。
示例代码:
# 演示请求后台接口代理配置
server {
listen 8080;
server_name localhost;
location ^~/api/ {
proxy_pass http://127.0.0.1:8000/;
proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
}
location ^~/api {
proxy_pass http://127.0.0.1:8000/;
proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
}
}