当前位置: 首页 > article >正文

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,因此访问不到。


http://www.kler.cn/a/589425.html

相关文章:

  • 适配iOS 18:检测并移除三方库中的 bitcode 部分
  • CentOS高性能数据处理优化指南
  • 微服务存在的问题及解决方案
  • 设计模式之外观模式:原理、实现与应用
  • C++ primer plus 使用类上
  • 【Agent】OpenManus-Flow-PlanningFlow设计分析
  • golang-方法
  • 创建表空间和表
  • 优选算法的匠心之艺:二分查找专题(二)
  • C++洛谷基础练习题及解答
  • TCP简单链接的编程实现
  • 关于Redis的集群(上)
  • 高主频GPU+RTX4090:AI生图性能优化超150%
  • Netty基础—7.Netty实现消息推送服务一
  • llama.cpp 和 LLM(大语言模型)
  • 图 最 短 路
  • 【嵌入式学习】计算机组成原理-二进制存储基础
  • 【从零开始】Air780EPM的LuatOS二次开发——OneWire协议调试注意事项!
  • 【Linux】深入理解进程和文件及内存管理
  • Leetcode 不同路径 ||