如何配置Nginx反向代理以支持iframe嵌入外部站点

核心问题分析 #

你的iframe原本使用绝对URL，但浏览器却发起了到当前域名https://example.com的请求，大概率是两个原因：

1. React应用实际渲染的iframe src被错误处理成相对路径（比如缺失https://前缀）；
2. Nginx的location规则错误拦截了本应直接发向外部站点的请求，并尝试代理。

以下提供两种方案，优先推荐第一种（无需代理，性能更优）：

方案一：让浏览器直接请求外部站点（无需Nginx代理） #

这是最优解，不需要额外代理层，直接让浏览器发起跨域请求加载外部iframe。

步骤1：确认React代码中的iframe src是完整绝对URL #

检查你的React组件代码，确保iframe的src属性是完整的https://external-site.com/someapp/session?token=1234，没有被模板字符串、环境变量或打包工具错误处理成相对路径（比如/external-site.com/someapp/...）。

本地运行正常说明代码逻辑本身没问题，可能是线上环境变量配置错误导致src被替换成相对路径，仔细核对线上构建的环境变量。

步骤2：调整Nginx的CSP配置（如果需要） #

确保Nginx允许加载外部站点的iframe，在location /中添加正确的Content-Security-Policy头：

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    add_header Set-Cookie "msal_client_id=${BFF_MSAL_CLIENT_ID};Path=/;Secure";
    # 允许加载external-site.com的iframe
    add_header Content-Security-Policy "frame-src 'self' https://external-site.com";
}

注意：移除你之前添加的location ^~ /external-site.com规则，避免Nginx拦截本应直接发向外部的请求。

步骤3：确认Azure Ingress的配置 #

确保Azure Ingress没有修改请求路径或添加额外重定向规则，导致iframe的src被篡改。

方案二：通过Nginx代理外部站点请求（如果必须代理） #

如果因为跨域限制或其他原因必须通过Nginx代理外部iframe请求，修正你的Nginx配置：

正确的代理配置 #

upstream bff_service {
    server    ${BFF_HOST}:${BFF_PORT};
    keepalive 32;
    keepalive_requests 1000;
    keepalive_timeout 75s;
}

server {
    listen 80;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        add_header Set-Cookie "msal_client_id=${BFF_MSAL_CLIENT_ID};Path=/;Secure";
        add_header Content-Security-Policy "frame-src 'self' https://external-site.com";
    }

    location /api {
        proxy_read_timeout 300s;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host ${BFF_HOST};
        proxy_set_header X-NginX-Proxy true;
        proxy_pass ${BFF_PROTOCOL}://bff_service; 
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        proxy_redirect off;
    }

    # 新增代理外部站点的location，使用专属前缀避免冲突
    location ^~ /external-proxy/ {
        # 移除请求路径中的/external-proxy/前缀
        rewrite ^/external-proxy/(.*)$ /$1 break;
        # 代理到外部站点
        proxy_pass https://external-site.com;
        # 设置正确的Host头，避免外部站点拒绝请求
        proxy_set_header Host external-site.com;
        # 传递真实客户端IP
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 关闭缓存，确保获取最新内容
        proxy_cache_bypass $http_upgrade;
        proxy_no_cache $http_upgrade;
    }
}

对应调整React中的iframe src #

将iframe的src改为相对路径，指向Nginx的代理前缀：

<iframe src="/external-proxy/someapp/session?token=1234" />

这样Nginx会将/external-proxy/someapp/...的请求转发到https://external-site.com/someapp/...，避免路径重复或篡改。

额外注意事项 #

• 你的Nginx配置中Set-Cookie的Secure属性：因为Nginx运行在80端口（HTTP），但Azure Ingress处理HTTPS，建议用变量动态设置Secure，避免HTTP环境下无效：

  add_header Set-Cookie "msal_client_id=${BFF_MSAL_CLIENT_ID};Path=/;Secure=$https_only";
  

• 确保外部站点允许被你的域名https://example.com嵌入（检查外部站点的X-Frame-Options或Content-Security-Policy头），否则即使配置正确，iframe也会被浏览器拦截。

内容的提问来源于stack exchange，提问作者BLC