nginx反向代理应用实例

Posted 2022-11-21 咖啡壶子

应用背景

当我们在使用脚手架创建一个简单的前端项目时，可能会使用很多的三方服务。如果你的前端应用和后端 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地址