nginx处理跨域问题以及隐藏第三方地址
nginx处理跨域问题以及隐藏第三方地址
一、背景
场景,开发的系统,需要调用客户提供的ai审核接口,并且调用接口后,接口会返回后续操作的地址(这个地址是客户方的地址)。
最开始实现的方式是,前端请求接口拿到这个地址后,前端请求地址。但客户认为这个设计暴漏了ai审核相关的地址信息,要求隐藏这个地址,并且要求将这个地址内嵌到web页面。
涉及到信息,都用mock代替:
我们web的网页域名:
https://we.com
客户返回的地址:
http://3.3.2.2:33/ai/url
二、处理流程
实现方案:
在nginx配置拦截固定标识的请求,跳转到客户地址。后端返回替换后且带固定前缀标识的地址,前端在当前域名拼接上后端返回的地址,使用iframe对地址请求,并完成内嵌。
这样的好处在于避免了跨域问题,和隐藏了要跳转的真实地址。
实现中修改点:
后端改动:
后端调用客户接口拿到跳转地址,将跳转地址的ip和端口替换,并增加固定标识/turnToAiAudit
前端改动:
获取到后端返回的地址,拼上当前域名,使用iframe对地址请求,并完成内嵌
nginx配置:
1.配置拦截/turnToAiAudit,固定跳转到客户目标地址,配置信息为:
location /turnToAiAudit/ {
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size 10m;
proxy_pass http://xx:xx/;
}
2.注释跳转强制使用https请求:
#add_header Content-Security-Policy "upgrade-insecure-requests;connect-src *" always;
客户方改动:
1.提供的网页代码.css,.js等,访问路径都加上/turnToAiAudit前缀
2.注释跳转强制使用https请求:
#add_header Content-Security-Policy "upgrade-insecure-requests;connect-src *" always;
遇到的问题:
1.配置nginx代理后,客户提供的css等访问不到,显示的路径为:
https://we.com/客户提供的.css
2.配置nginx代理后,成功跳转到客户ip和端口,但客户网页中,还有部分是他们提供的ip和端口,查看后显示为https:客户的ip:端口。这个处理方式,客户在他们nginx配置【
注释跳转强制使用https请求】。
三、原理理解
大致理解:
前端代码在浏览器中运行,可以理解为浏览器通过域名和路径找到了,放到服务器上的前端代码文件,并完成解析和渲染最终显示了前端页面。
浏览器如何找到这个前端代码文件,就是通过域名,比如https://we.com/fornt/home,这个front/home就是文件存放的路径,至于互联网中有很多个服务器,要找到对应的服务,就是通过域名,比如:https://we.com
Deepseek:
你的理解基本正确,可以补充几个关键点:
域名解析:we.com 会通过 DNS 系统转换为服务器的 IP 地址(如 192.168.1.1),这才是服务器在互联网中的"门牌号"。
路径不一定是真实路径:像 /front/home 这类路径,实际可能是前端路由(如 React/Vue 的单页应用),服务器可能返回同一个 HTML 文件,由前端框架处理页面切换。
服务器配置:服务器(如 Nginx)会定义如何处理请求,比如:
/static/ 开头的请求返回静态文件(JS/CSS)
其他路径可能统一返回 index.html
文件可能被优化:前端代码通常会打包压缩(如 app.a3b4c5.js),文件名和路径可能与源码不同。
CDN 加速:像图片/CSS/JS 等静态资源,可能通过 CDN 分发到全球节点,而非直接来自 we.com 的服务器。
总结:域名找服务器,路径由服务器规则处理,最终返回前端资源,但路径和文件不一定一一对应。
Nginx 核心作用是「反向代理」,nginx可以理解为一个中转站,在浏览器和java服务中间的一个中转站。配置了拦截目录后,/turnToAiAudit,访问https://we.com/turnToAiAudit/**路径时,就会被拦截,它拦截请求后,而是将请求转发到目标服务(如 Java 服务),再将结果返回给浏览器,整个过程用户无感知。
nginx的拦截转发,也就解释了,遇到的问题:1.配置nginx代理后,客户提供的css等访问不到,显示的路径为:https://we.com/客户提供的.css。因为当前请求的地址是,https://we.com,客户返回的css则是根据当前路径访问的,因此就组装成了,https://we.com/客户提供的.css,而实际能范围的是:http://客户ip和端口/客户提供的.css,因此访问不到。