从React Azure静态Web应用调用.NET Azure函数时遇CORS错误求助

从源'https://nice-sea-xxxxxxxx.3.azurestaticapps.net'访问XMLHttpRequest at '/limitMasterDetails/segmentLimit'已被CORS策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在'Access-Control-Allow-Origin'标头。

已尝试的操作：

• 修改函数应用CORS配置以允许对应源
• 在API级别修改APIM CORS策略以允许对应源
• 在Startup.cs类中添加CORS策略
• 修改函数应用host.json以允许对应源
• 清除浏览器缓存并更换浏览器尝试

进一步排查与解决建议 #

1. 确认APIM CORS策略的生效范围与优先级 #

• 检查APIM的CORS策略是否正确关联到了/limitMasterDetails/segmentLimit这个具体路由，而非仅在API级别设置但未覆盖目标操作。
• APIM的出站策略会覆盖后端返回的CORS头，确保策略中明确配置必要字段，示例片段：

<cors allow-credentials="true">
    <allowed-origins>
        <origin>https://nice-sea-xxxxxxxx.3.azurestaticapps.net</origin>
    </allowed-origins>
    <allowed-methods preflight-result-max-age="300">
        <method>GET</method>
        <method>POST</method>
        <!-- 补充接口实际使用的HTTP方法 -->
    </allowed-methods>
    <allowed-headers>
        <header>*</header>
    </allowed-headers>
</cors>

2. 验证Azure Functions的CORS配置是否未被覆盖 #

• 登录Azure门户进入Function App，查看API > CORS设置：确认已添加目标静态Web App域名，且未勾选"允许所有来源"（避免和APIM策略冲突）。
• 若使用隔离计划的Function App，检查是否有应用网关、CDN等前端代理设备，这些设备可能修改或移除CORS响应头。

3. 检查.NET Function的CORS代码实现正确性 #

• 隔离模型Function：需在Startup.cs中正确配置并启用CORS策略：

public void ConfigureServices(IServiceCollection services)
{
    services.AddCors(options =>
    {
        options.AddPolicy("AllowStaticApp",
            policy => policy.WithOrigins("https://nice-sea-xxxxxxxx.3.azurestaticapps.net")
                            .AllowAnyMethod()
                            .AllowAnyHeader());
    });
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    app.UseCors("AllowStaticApp");
    // 其他中间件配置
}

• 进程内模型Function：需在函数类上添加[EnableCors("AllowStaticApp")]特性，同时确保host.json的CORS配置正确：

{
    "version": "2.0",
    "extensions": {
        "http": {
            "cors": {
                "allowedOrigins": ["https://nice-sea-xxxxxxxx.3.azurestaticapps.net"],
                "allowedMethods": ["GET", "POST"]
            }
        }
    }
}

4. 抓包分析预检请求与响应 #

• 用浏览器开发者工具（Network面板）或Fiddler抓包，查看OPTIONS预检请求的响应头：
  • 确认是否存在Access-Control-Allow-Origin、Access-Control-Allow-Methods等必要字段。
  • 若响应头缺失，检查请求是否真正到达APIM或Function App，是否有防火墙、路由规则拦截了请求。

5. 检查Azure静态Web App的API路由配置 #

• 如果静态Web App和Function App是通过静态Web Apps的API集成部署，确认staticwebapp.config.json的路由配置是否正确，确保API请求被正确转发：

{
    "routes": [
        {
            "route": "/limitMasterDetails/*",
            "backend": {
                "url": "https://your-function-app.azurewebsites.net/api/{route}"
            }
        }
    ]
}

6. 确认Function App的身份验证设置 #

• 若Function App启用了Azure AD或其他身份验证，检查是否未对OPTIONS请求放行，导致预检请求被拦截。可在身份验证设置中添加允许匿名访问OPTIONS请求的规则。

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