React调用API触发CORS错误，请求头Accepts不被允许如何解决？

问题根源 #

你遇到的CORS错误核心是请求头拼写错误：你用了Accepts而非标准HTTP请求头Accept，服务端的CORS配置不允许Accepts这个自定义头，导致预请求（OPTIONS）被拦截。另外代码还有异步处理问题——axios.get是异步操作，未加await会直接访问Promise对象的data属性，这也会引发错误。

修复步骤 #

• 将请求头的Accepts改为Accept，匹配服务端允许的头字段
• 在axios.get前添加await，确保获取到实际响应对象后再处理数据

修正后的完整代码 #

import axios from "axios";
import { useEffect, useState } from "react";

export default function JokesCard() {
  const [joke, setJoke] = useState("");

  async function getDadJoke() {
    try {
      // 修正请求头拼写，添加await
      const config = { headers: { Accept: "application/json" } };
      const res = await axios.get("https://icanhazdadjoke.com/", config);
      setJoke(res.data.joke);
    } catch (e) {
      setJoke("No jokes available!");
      // 可选：添加日志方便排查问题
      console.error("获取笑话失败:", e);
    }
  }

  // 可选：组件挂载时自动加载第一个笑话
  useEffect(() => {
    getDadJoke();
  }, []);

  return (
    <section className="text-center mt-10">
      <div className="mx-auto text-left flex flex-col items-center w-4/12 border-2 rounded-lg p-5">
        <p>{joke}</p>
        <button onClick={getDadJoke} className="self-end">
          Next joke ➡️
        </button>
      </div>
    </section>
  );
}

额外说明 #

• icanhazdadjoke.com的API明确要求用Accept: application/json获取JSON响应，拼写正确的头不仅解决CORS问题，还能确保拿到预期的数据结构
• 添加useEffect是为了让组件加载时自动显示第一个笑话，提升体验，你可以按需保留或移除

内容的提问来源于stack exchange，提问作者Sara Leão