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创建一台服务器运行项目。

  1. 如果使用tomcat运行该前端项目的话,因为tomcat只是创建一台服务器,不能转发请求,所以当使用tomcat来运行该项目的话,会出现404码,请求三方服务,地址前缀是本地服务器,这根本行不通。
  2. 所以,我们就必须要想到使用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反向代理应用实例的主要内容,如果未能解决你的问题,请参考以下文章

Linux平台部署nginx反向代理实例

nginx 反向代理说明

(高级篇)Nginx反向代理and负载均衡实例详解

使用Nginx的反向代理多角度应用程序

由于 nginx 反向代理,无法获取用户 ip

Nginx实例之反向代理Tomcat