Azure Web App前端无法连接后端：Axios返回400错误请求

1. 验证请求路径与后端路由匹配性 #

• 直接在浏览器或Postman中访问后端线上地址https://nicksportfolio.azurewebsites.net/api/forum，若同样返回400，说明问题出在后端路由或参数校验，与前端无关。
• 核对前端Axios请求的完整URL，排查是否存在拼写错误、多余斜杠等路径问题，比如是否误将/api/forum写为/api/forums。

2. 检查请求参数与格式合规性 #

400错误多因请求不符合后端要求，需对比本地与线上请求的差异：

• 确认请求Headers的Content-Type是否一致，比如本地用application/json，线上是否因Axios配置错误变为application/x-www-form-urlencoded。
• 检查请求Body的结构与字段是否匹配后端模型，是否存在必填字段缺失、字段类型错误等问题。
• 利用浏览器开发者工具的Network面板，查看线上请求的Headers、Body详情，与本地请求逐一对比差异。

3. 核对.NET后端配置与日志 #

• 查看Azure Web App的日志流（Log stream），获取后端返回400的具体原因，比如模型验证失败、参数绑定错误等。
• 确认CORS中间件的注册位置是否正确：在.NET中，CORS中间件必须放在UseRouting()之后、UseAuthorization()之前，示例代码如下：

app.UseRouting();
// CORS中间件需在此位置注册
app.UseCors(builder => builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
app.UseAuthorization();
app.MapControllers();

• 检查后端环境配置差异：本地用Development环境，线上用Production环境，是否存在认证规则、请求限制等配置差异导致请求被拦截。

4. 排查Azure Web App服务设置 #

• 确认后端Web App的启动命令是否正确，避免因部署方式（如Zip部署、GitHub Actions）导致启动参数错误，引发服务未正常启动或路由未加载。
• 检查Web App的应用设置，排查是否存在WEBSITE_RUN_FROM_PACKAGE开启状态异常、URL重写规则篡改请求路径等情况。

5. 处理HTTPS与转发头问题 #

Azure Web App默认强制HTTPS，需确保后端正确处理转发头：
在.NET的Program.cs中添加转发头配置，保证后端能正确识别请求Scheme：

app.UseForwardedHeaders(new ForwardedHeadersOptions
{
    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
});

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