如何使用Azure标准功能解决跨Azure Web App部署的前后端CORS问题？

方案1：Azure门户直接配置（无需修改代码，优先推荐） #

直接在部署后端应用的Azure Web App 2侧配置CORS规则即可，步骤如下：

• 登录Azure门户，找到部署后端API的Azure Web App 2资源
• 左侧导航栏找到「API」分类下的「CORS」选项
• 在「允许的来源」输入框中填入前端Web App 1的完整域名（比如https://your-frontend.azurewebsites.net，注意不要加末尾的斜杠）
• 如果需要允许携带身份凭证（比如Cookie、Authorization头），勾选「启用凭据」选项
• 点击「保存」，等待30秒左右配置生效即可

注意：如果测试阶段需要放宽限制，可以直接填入*允许所有来源，但生产环境建议只填写实际的前端域名，避免安全风险。

方案2：.NET Core后端代码配置 #

如果需要更灵活的跨域规则控制，可以直接在.NET Core项目中配置CORS，步骤如下：

1. 打开Program.cs文件，添加CORS服务注册：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowFrontend", policy =>
    {
        policy.WithOrigins("https://your-frontend.azurewebsites.net") // 替换为前端Web App 1的域名
              .AllowAnyHeader()
              .AllowAnyMethod();
              // 如果需要携带凭证，加上 .AllowCredentials()
    });
});

2. 在中间件管道中启用CORS，注意要放在app.UseAuthorization()之前：

app.UseCors("AllowFrontend");
app.UseAuthorization();

3. 重新发布代码到Azure Web App 2即可生效。

注意事项 #

• 两种方案二选一即可，不需要同时配置：如果Azure门户配置了CORS规则，会覆盖.NET Core代码中的CORS配置
• 不需要配置客户端IP地址，CORS规则只校验请求的来源站点域名，和客户端用户IP无关
• 配置生效后可以清除浏览器缓存再测试，避免旧的跨域拦截规则缓存影响验证结果

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