React中Axios POST请求未携带凭据且触发CORS错误求助

问题根源 #

POST请求属于非简单请求，浏览器会先发送OPTIONS预检请求验证权限，但你的Azure Function未处理OPTIONS请求，且默认CORS响应未返回Access-Control-Allow-Credentials: true头；而GET是简单请求，无需预检，直接使用函数返回的头，因此正常工作。

解决方案 #

1. 修改Azure Function代码，显式处理OPTIONS预检请求 #

更新函数配置，添加OPTIONS方法支持，并在请求处理中返回符合要求的CORS头：

// (localhost:3000)
app.http("addData", {
  methods: ["GET", "POST", "OPTIONS"], // 新增OPTIONS方法
  authLevel: "anonymous",
  route: "addData",
  handler: async (request, context) => {
    // 处理OPTIONS预检请求
    if (request.method === "OPTIONS") {
      return {
        status: 200,
        headers: {
          "Access-Control-Allow-Origin": "http://localhost:5173", // 必须指定具体源，不能用*
          "Access-Control-Allow-Credentials": "true",
          "Access-Control-Allow-Methods": "GET, POST, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type, Cookie" // 匹配实际请求携带的头
        },
        body: ""
      };
    }

    // 原有GET/POST逻辑
    const cookies = request.headers.get("cookie")
    context.log("cookies are ", cookies)
    return {
      status: 200,
      headers: {
        "Access-Control-Allow-Origin": "http://localhost:5173", // 同样指定具体源
        "Access-Control-Allow-Credentials": true,
      },
      body: "Data Added",
    }
  }
})

2. 确保local.settings.json配置正确 #

确认CORS设置为具体源，不能使用通配符*（带Cookie的请求不允许用*）：

{
  "Host": {
    "CORS": "http://localhost:5173"
  }
}

关键注意点 #

• 当请求携带credentials时，Access-Control-Allow-Origin必须是具体的域名，不能用*，否则浏览器会拒绝响应。
• 预检请求（OPTIONS）和实际请求（POST/GET）都必须返回Access-Control-Allow-Credentials: true头。

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