Azure前端App Service调用带私有端点的后端App Service报403 IP禁止错误

问题本质 #

你的核心问题是Angular作为单页应用（SPA），代码在用户浏览器中执行，API请求直接从用户客户端发起，而非前端App Service转发，所以后端App Service看到的请求IP是用户的公网IP，不是前端App Service的子网IP，导致你配置的前端子网访问规则失效。

推荐方案：用前端App Service做反向代理（实现后端完全私有） #

这个方案能彻底禁止后端的公网访问，仅允许前端App Service转发的请求：

1. 后端App Service完全私有化 #

• 进入后端App Service的网络 -> 访问限制，设置为「拒绝所有公网访问」
• 确保后端的私有端点已正确关联到VNet的私有子网，自动生成的Private DNS Zone已配置完成，保证前端子网能解析后端的私有域名（比如your-backend-name.privatelink.azurewebsites.net）

2. 前端App Service配置反向代理 #

根据前端App Service的操作系统选择配置方式：

Windows环境（web.config）

在前端App Service的根目录添加web.config，配置API路径的转发规则：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 把所有/api开头的请求转发到后端私有地址 -->
        <rule name="Proxy to Backend" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="https://your-backend-privatelink-url.azurewebsites.net/api/{R:1}" />
        </rule>
      </rules>
    </rewrite>
    <!-- 传递客户端IP给后端（可选） -->
    <httpProtocol>
      <customHeaders>
        <add name="X-Forwarded-For" value="{REMOTE_ADDR}" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

Linux环境（Nginx配置）

修改前端App Service的nginx.conf（可通过SSH或Kudu站点编辑），添加代理规则：

server {
    listen 8080;
    server_name localhost;
    root /home/site/wwwroot;
    index index.html index.htm;

    # 转发/api路径到后端私有地址
    location /api/ {
        proxy_pass https://your-backend-privatelink-url.azurewebsites.net/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $remote_addr;
    }

    # SPA路由 fallback
    location / {
        try_files $uri $uri/ /index.html;
    }
}

3. 调整前端代码API地址 #

把Angular代码中的API baseUrl改为前端App Service的相对路径，比如/api，而非直接写后端的公网URL。

4. 后端配置允许前端子网访问 #

在后端App Service的访问限制中，添加允许前端子网的IP范围的规则——此时请求是从前端App Service所在的子网发起的，这个规则会生效。

备选方案：Azure AD身份认证（适合需用户验证的场景） #

如果不需要完全依赖网络隔离，可通过身份认证控制访问：

• 后端App Service启用Azure AD认证，设置为「仅允许已认证的用户/应用访问」
• 前端Angular应用配置Azure AD认证，获取访问令牌后调用后端API
• 后端关闭IP访问限制，依赖Azure AD的身份验证来确保只有前端应用的合法请求能通过

内容的提问来源于stack exchange，提问作者T.Dev