前言
在 web 开发与部署中,我们常常需要借助 nginx 实现接口代理和静态资源代理,以解决跨域、统一入口、权限控制或性能优化等问题。本指南将全面介绍 nginx 资源代理与接口代理的实现方法,并深入解析 proxy_set_header host 配置的差异与最佳实践。
在现代前后端分离的架构中,前端页面往往需要访问多个不同域名的后端服务,或引用外部的静态资源。若直接请求,会产生跨域问题,或不便于统一管理。这时,使用 nginx 实现代理是一种优雅的解决方案。
一、资源代理与接口代理的区别
项目 | 资源代理(静态文件) | 接口代理(api 接口) |
---|---|---|
目标 | 静态文件(如 js、css、图片等) | 后端接口(如 json api) |
常见场景 | 加载第三方资源、镜像远程 cdn、本地统一管理第三方脚本等 | 跨域接口访问、统一接口路径、api 聚合等 |
请求方式 | get | get、post、put、delete 等多种方式 |
常见配置重点 | proxy_pass 、缓存策略、mime 类型 | proxy_pass 、请求头设置(如 host、authorization)等 |
类型 | 示例 url | 功能说明 |
---|---|---|
资源代理 | /proxy/res/plugin/editor/editor.js | 将前端请求的静态资源转发给外部服务器 |
接口代理 | /api/user/info | 将请求的接口转发到指定后端服务 |
二、应用场景举例
资源代理场景:
前端项目需要引入第三方编辑器插件,例如来自
static.example.com
的 js/css 文件。但出于同源策略或备案原因,希望通过 nginx 中转。接口代理场景:
前端调用
/api/user/info
实际请求应转发到api-backend.example.com/user/info
,避免跨域问题或隐藏后端真实地址。
三、资源代理配置
示例目标
将请求:
https://test.example.com/proxy/res/plugin/editor/editor.js
- 代理到:
https://static.example.com/res/plugin/editor/editor.js
- nginx 配置示例
server { listen 443 ssl; server_name test.example.com; ssl_certificate /etc/nginx/ssl/test.example.com.crt; ssl_certificate_key /etc/nginx/ssl/test.example.com.key; location /proxy/res/plugin/editor/ { proxy_pass https://static.example.com/res/plugin/editor/; proxy_set_header host static.example.com; # 保持与目标一致,避免部分资源校验失败 proxy_set_header x-real-ip $remote_addr; proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for; proxy_set_header x-forwarded-proto $scheme; } }
注意:proxy_pass 末尾保留 /,确保路径拼接正确。
四、接口代理配置
示例目标
将请求:
https://test.example.com/api/user/info
- 代理到:
http://api-backend.example.com/user/info
- nginx 配置示例
location /api/ { proxy_pass http://api-backend.example.com/; proxy_set_header host $host; # 保留前端原始 host 头,用于权限校验或日志追踪 proxy_set_header x-real-ip $remote_addr; proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for; proxy_set_header x-forwarded-proto $scheme; }
注意:若 proxy_pass 后带 /,则会将匹配到的路径直接截去 /api/,从而 /api/user/info → /user/info。
五、关于 proxy_set_header host 的设置差异说明
设置形式 | 说明与适用场景 |
---|---|
proxy_set_header host $host; | 将客户端请求中的 host 原样转发,适用于接口代理、保留访问域名。 |
proxy_set_header host example.com; | 强制设置 host 为目标服务器,适用于资源代理、目标服务器严格校验域名时。 |
六、常见问题排查
资源无法加载,返回 403/404?
是否 proxy_pass 写法错误?结尾是否缺少 /?
目标资源服务器是否校验 host?试试 proxy_set_header host xxx。
url 拼接是否正确?可通过 curl -v 本地排查。
跨域问题(cors)?
nginx 不是万能解决方案,需要目标服务支持 cors;
若目标后端不可控,可由 nginx 添加响应头:
location /api/ { add_header access-control-allow-origin *; add_header access-control-allow-methods get,post,options; add_header access-control-allow-headers *; proxy_pass http://api-backend.example.com/; }
注意:生产环境中建议使用白名单,避免任意源访问。
七、安全建议与优化
- 限定访问来源
allow 10.0.0.0/8; deny all;
- 开启缓存提升性能(资源代理)
proxy_cache_path /tmp/nginx_cache levels=1:2 keys_zone=res_cache:10m inactive=1h max_size=1g; location /proxy/res/ { proxy_cache res_cache; proxy_pass https://static.example.com/res/; }
统一接口前缀管理使用
/api/
路由前缀划分接口,避免前后端路径冲突。
八、总结
场景 | proxy_pass 写法 | host 设置建议 |
---|---|---|
静态资源代理 | proxy_pass https://xxx/资源路径/ | proxy_set_header host 具体域名 |
接口代理 | proxy_pass http://xxx/ | proxy_set_header host $host |
以上就是利用nginx实现资源代理和接口代理的实现方法的详细内容,更多关于nginx资源代理和接口代理的资料请关注代码网其它相关文章!