Nuxt与.NET Core容器化部署仅POST请求报400错误求助

问题现象 #

• 前端页面正常显示，但在Docker部署的Nuxt+.NET Core环境下，仅POST请求返回400 Bad Request
• 用API测试工具直接调用http://localhost:5000/api/kokyakus/时，GET/POST请求均返回200
• GET/PUT/DELETE请求在部署环境中运行正常
• 前端提交的POST请求体示例：

{
"No": "0",
"Name": "data1",
"Kana": "data1",
"Gender": "women",
"Address": "NewYork",
"Age": "25",
"keyword":""
}

排查与解决步骤 #

1. 优先排查Nuxt代理配置 #

API工具调用正常但前端POST失败，大概率是代理转发的问题，重点注意Docker容器间通信规则：

• 修改nuxt.config.js的proxy配置，不要用localhost（容器内的localhost指向自身，而非宿主机），改用后端容器的名称或Docker网络内的服务名：

export default {
  proxy: {
    '/api/': {
      target: 'http://dotnet-api-container:5000', // 替换为你的.NET Core容器名称
      changeOrigin: true,
      pathRewrite: { '^/api': '/api' }
    }
  }
}

• 确认Nuxt容器和.NET Core容器在同一个Docker网络中，否则无法通过容器名通信。

2. 检查请求体格式与后端模型绑定 #

• 删除请求体末尾的多余逗号：你提供的示例中keyword字段后有多余逗号，这会导致JSON格式错误，后端解析时直接返回400。确保前端发送的JSON语法完全正确。
• 核对.NET Core模型类与请求体字段的映射：如果模型属性名为No，数据库字段也是No，不需要改成id，只需确保模型上添加了正确的特性（比如[JsonPropertyName("No")]），避免大小写或字段名不匹配导致绑定失败。
• 检查后端模型的必填校验：如果模型中存在必填字段（比如Name标记了[Required]），前端若传空值会触发验证失败，返回400。可以查看后端日志获取具体验证错误。

3. 验证CORS配置（优先级较低） #

GET请求正常说明CORS基本生效，400错误一般不是CORS问题（CORS错误是403），但可以做以下确认：

• 保持AllowAnyOrigin不变，避免限制源导致的意外问题，先排除CORS干扰。
• 确保后端CORS配置允许POST方法和application/json请求头：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

// 注意中间件顺序：UseCors要放在UseRouting之后，UseAuthorization之前
app.UseCors("AllowAll");

4. 查看后端详细日志定位根因 #

开启.NET Core容器的详细日志，直接获取400错误的具体原因：

• 修改appsettings.json的日志级别：

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Debug"
    }
  }
}

• 查看容器日志：

docker logs <你的.NET Core容器ID或名称>

日志会明确提示是JSON解析错误、模型验证失败还是路由匹配问题。

5. 前端请求代码检查 #

确保前端发送POST请求时配置正确：

async submitForm() {
  const formData = {
    No: "0",
    Name: "data1",
    Kana: "data1",
    Gender: "women",
    Address: "NewYork",
    Age: "25",
    keyword: ""
  };
  try {
    const response = await this.$axios.post('/api/kokyakus/', formData);
    console.log(response);
  } catch (error) {
    console.error(error.response.data); // 打印后端返回的错误详情
  }
}

• 确保请求头自动携带Content-Type: application/json（Axios默认会处理），不要手动设置错误的Content-Type。

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