无本地服务器下React跨域（CORS）请求问题求助

尝试调用https://dummyjson.com/auth/login接口获取数据，请求代码如下：

const getArticles = async () => {
  const data = await fetch("https://dummyjson.com/auth/login", {
    method: "POST",
    headers: { "Content-Type": "application/json",'Access-Control-Allow-Origin': 'http://localhost:3000', 'Access-Control-Allow-Credentials': 'true' },
    body: JSON.stringify({
      username: "emilys",
      password: "emilyspass",
      expiresInMins: 30, // optional, defaults to 60
    }),
    credentials: "include", // Include cookies (e.g., accessToken) in the request
  });
};

遇到CORS相关错误，错误截图如下：

核心问题 #

你在请求头里添加了Access-Control-Allow-Origin和Access-Control-Allow-Credentials——这两个是服务器返回给浏览器的响应头，完全不需要前端在请求时携带。前端请求带这些头会触发浏览器的CORS预检，而服务器不允许这类自定义头，直接导致跨域错误。

修正后的代码 #

const getArticles = async () => {
  try {
    const response = await fetch("https://dummyjson.com/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" }, // 移除多余的响应头
      body: JSON.stringify({
        username: "emilys",
        password: "emilyspass",
        expiresInMins: 30,
      }),
      credentials: "include",
    });

    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`HTTP错误: ${response.status}`);
    }

    // 解析响应数据
    const data = await response.json();
    console.log("登录成功:", data);
    // 这里可以添加后续的业务逻辑
  } catch (err) {
    console.error("请求失败:", err);
  }
};

补充说明 #

1. dummyjson的接口本身已经配置了正确的CORS响应头，前端不需要额外设置跨域相关的请求头。
2. 新增try/catch块可以捕获网络错误或服务器返回的错误状态码，方便调试和错误处理。
3. 必须调用response.json()才能解析服务器返回的JSON数据，原代码里只拿到了响应对象，没有处理实际数据。

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