如何限制Azure APIM后端API仅允许React应用访问？

针对你遇到的问题，以下是几个实用的解决方案，从易到难，兼顾安全性和实现成本：

1. 启用API密钥验证，配合前端环境变量存储 #

Azure APIM自带API密钥验证功能，能快速给API加上访问门槛：

• 在APIM的目标API入站策略中添加<validate-api-key>策略，要求请求必须携带有效的订阅密钥；
• 在React项目里把密钥存在环境变量（比如REACT_APP_API_KEY），请求API时在头里带上Ocp-Apim-Subscription-Key: ${process.env.REACT_APP_API_KEY}；
• 虽然前端环境变量会被打包进代码，无法完全隐藏，但能拦截大部分随意尝试的请求，同时你可以给开发、生产环境配置不同密钥，定期轮换降低风险。

2. 验证请求的Origin/Referer头，增强访问控制 #

CORS是浏览器层面的限制，POSTMAN等工具可以伪造Origin，但在APIM里添加头验证策略，能拦截大部分非合法来源的请求：

• 在APIM入站策略中添加判断逻辑，检查请求的Origin或Referer是否匹配你的React应用域名，不匹配直接返回403：

  <choose>
      <when condition="@(!context.Request.Headers.GetValueOrDefault("Origin", "").Equals("https://your-react-domain.com", StringComparison.OrdinalIgnoreCase))">
          <return-response>
              <set-status code="403" reason="Forbidden" />
              <set-body>{"error":"Invalid request origin"}</set-body>
          </return-response>
      </when>
  </choose>
  

• 注意：部分浏览器可能不会发送Referer，建议优先验证Origin，同时可以设置宽松规则（比如允许包含域名的前缀），避免误拦截合法请求。

3. 配置Azure AD OAuth2.0授权（最安全方案） #

这是保护公开SPA API的标准安全方案，通过令牌验证确保只有你的React应用能发起有效请求：

• 在Azure AD中注册两个应用：一个作为React SPA的客户端应用，一个作为APIM的服务应用；
• 给APIM的入站策略添加<validate-jwt>策略，验证令牌的发行者、受众、签名等信息；
• React应用使用MSAL.js库，通过授权码流+PKCE获取访问令牌，请求API时在Authorization头带上Bearer {token}；
• 这种方式下，即使API URL被泄露，没有有效令牌也无法访问，令牌有过期时间，还能通过Azure AD的权限控制进一步细化访问范围。

4. 叠加速率限制策略，降低滥用风险 #

不管用哪种方案，都建议给APIM加上速率限制，防止恶意用户拿到访问权限后大规模滥用：

• 在APIM中添加<rate-limit-by-key>策略，根据订阅密钥或客户端IP设置请求上限，比如限制每个客户端每分钟最多100次请求；
• 示例策略：

  <rate-limit-by-key calls="100" renewal-period="60" counter-key="@(context.Request.Headers.GetValueOrDefault("X-Client-IP", context.Request.IpAddress))" />
  

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