前言

在 Web 开发与部署中，我们常常需要借助 Nginx 实现接口代理和静态资源代理，以解决跨域、统一入口、权限控制或性能优化等问题。本指南将全面介绍 Nginx 资源代理与接口代理的实现方法，并深入解析 proxy_set_header Host 配置的差异与最佳实践。
在现代前后端分离的架构中，前端页面往往需要访问多个不同域名的后端服务，或引用外部的静态资源。若直接请求，会产生跨域问题，或不便于统一管理。这时，使用 Nginx 实现代理是一种优雅的解决方案。

一、资源代理与接口代理的区别

项目资源代理（静态文件）接口代理（API 接口）目标静态文件（如 JS、CSS、图片等）后端接口（如 JSON API）常见场景加载第三方资源、镜像远程 CDN、本地统一管理第三方脚本等跨域接口访问、统一接口路径、API 聚合等请求方式GETGET、POST、PUT、DELETE 等多种方式常见配置重点

1. proxy_pass

复制代码

、缓存策略、MIME 类型

1. proxy_pass

复制代码

、请求头设置（如 Host、Authorization）等类型示例 URL功能说明资源代理

1. /proxy/res/plugin/editor/editor.js

复制代码

将前端请求的静态资源转发给外部服务器接口代理

1. /api/user/info

复制代码

将请求的接口转发到指定后端服务
二、应用场景举例

• 资源代理场景：
  前端项目需要引入第三方编辑器插件，例如来自
  1. static.example.com

  复制代码
  的 JS/CSS 文件。但出于同源策略或备案原因，希望通过 Nginx 中转。
  
• 接口代理场景：
  前端调用
  1. /api/user/info

  复制代码
  实际请求应转发到
  1. api-backend.example.com/user/info

  复制代码
  ，避免跨域问题或隐藏后端真实地址。
  

三、资源代理配置

• 示例目标
  将请求：
  

1. https://test.example.com/proxy/res/plugin/editor/editor.js

复制代码

• 代理到：
  

1. https://static.example.com/res/plugin/editor/editor.js

复制代码

• Nginx 配置示例
  

1. server {
   
2.     listen 443 ssl;
   
3.     server_name test.example.com;
   
4. 
   
5.     ssl_certificate     /etc/nginx/ssl/test.example.com.crt;
   
6.     ssl_certificate_key /etc/nginx/ssl/test.example.com.key;
   
7. 
   
8.     location /proxy/res/plugin/editor/ {
   
9.         proxy_pass https://static.example.com/res/plugin/editor/;
   
10.         proxy_set_header Host static.example.com;  # 保持与目标一致，避免部分资源校验失败
    
11.         proxy_set_header X-Real-IP $remote_addr;
    
12.         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    
13.         proxy_set_header X-Forwarded-Proto $scheme;
    
14.     }
    
15. }

复制代码

• 注意：proxy_pass 末尾保留 /，确保路径拼接正确。
  

四、接口代理配置

• 示例目标
  将请求：
  

1. https://test.example.com/api/user/info

复制代码

• 代理到：
  

1. http://api-backend.example.com/user/info

复制代码

• Nginx 配置示例
  

1.         location /api/ {
   
2.     proxy_pass http://api-backend.example.com/;
   
3.     proxy_set_header Host $host;  # 保留前端原始 Host 头，用于权限校验或日志追踪
   
4.     proxy_set_header X-Real-IP $remote_addr;
   
5.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   
6.     proxy_set_header X-Forwarded-Proto $scheme;
   
7. }

复制代码

• 注意：若 proxy_pass 后带 /，则会将匹配到的路径直接截去 /api/，从而 /api/user/info → /user/info。
  

五、关于 proxy_set_header Host 的设置差异说明

设置形式说明与适用场景

1. proxy_set_header Host $host;

复制代码

将客户端请求中的 Host 原样转发，适用于接口代理、保留访问域名。

1. proxy_set_header Host example.com;

复制代码

强制设置 Host 为目标服务器，适用于资源代理、目标服务器严格校验域名时。
六、常见问题排查

• 资源无法加载，返回 403/404？
  
  
  
  • 是否 proxy_pass 写法错误？结尾是否缺少 /？
    
  • 目标资源服务器是否校验 Host？试试 proxy_set_header Host xxx。
    
  • URL 拼接是否正确？可通过 curl -v 本地排查。
    
  
  
• 跨域问题（CORS）？
  
  
  
  • Nginx 不是万能解决方案，需要目标服务支持 CORS；
    
  • 若目标后端不可控，可由 Nginx 添加响应头：
    
  
  

1. location /api/ {
   
2.     add_header Access-Control-Allow-Origin *;
   
3.     add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
   
4.     add_header Access-Control-Allow-Headers *;
   
5.     proxy_pass http://api-backend.example.com/;
   
6. }

复制代码

• 注意：生产环境中建议使用白名单，避免任意源访问。
  

七、安全建议与优化

• 限定访问来源
  

1. allow 10.0.0.0/8;
   
2. deny all;

复制代码

• 开启缓存提升性能（资源代理）
  

1. proxy_cache_path /tmp/nginx_cache levels=1:2 keys_zone=res_cache:10m inactive=1h max_size=1g;
   
2. 
   
3. location /proxy/res/ {
   
4.     proxy_cache res_cache;
   
5.     proxy_pass https://static.example.com/res/;
   
6. }

复制代码

• 统一接口前缀管理 使用
  1. /api/

  复制代码
  路由前缀划分接口，避免前后端路径冲突。
  

八、总结

场景proxy_pass 写法Host 设置建议静态资源代理

1. proxy_pass https://xxx/资源路径/

复制代码

1. proxy_set_header Host 具体域名

复制代码

接口代理

1. proxy_pass http://xxx/

复制代码

1. proxy_set_header Host $host

复制代码

以上就是利用Nginx实现资源代理和接口代理的实现方法的详细内容，更多关于Nginx资源代理和接口代理的资料请关注脚本之家其它相关文章！

来源：https://www.jb51.net/server/340081oo1.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！