nginx反向代理应用实例
Posted 咖啡壶子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nginx反向代理应用实例相关的知识,希望对你有一定的参考价值。
应用背景
当我们在使用脚手架创建一个简单的前端项目时,可能会使用很多的三方服务。如果你的前端应用和后端 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地址
以上是关于nginx反向代理应用实例的主要内容,如果未能解决你的问题,请参考以下文章