从API获取图片遭遇CORS策略错误，寻求解决方法

问题分析 #

你当前的代码存在两个关键问题：

1. API返回值处理错误：https://coffee.alexflipnote.dev/random 返回的是包含图片URL的JSON对象（格式为 {"file": "图片地址"}），但你直接将整个对象赋值给了image状态，导致img标签的src属性无效。
2. CORS限制：即使正确获取到图片URL，如果该图片所在服务器未配置允许你的前端域名跨域访问，就会触发CORS错误。

解决方案 #

1. 修正API返回值处理

先把代码里的状态更新逻辑改对，确保拿到正确的图片URL：

const handleNext = () => {
  fetch('https://coffee.alexflipnote.dev/random')
  .then(res => res.json())
  .then(data => {
    setImage(data.file) // 提取JSON中的file字段作为图片地址
    const unblurit = document.querySelector(".pic img");
    unblurit.classList.remove("unblur");
    unblurit.classList.add("blur");
  })
}

2. 解决CORS问题

如果修正后仍然触发CORS错误，可以用以下几种方式处理：

• 直接使用图片URL（推荐）：跳过fetch请求，img标签本身不受同源策略限制（除非图片服务器设置了严格的CORS头）。你可以直接将img的src指向API返回的图片直链，无需通过fetch中转。
• 配置前端代理：在React项目的package.json里添加代理配置，让前端请求通过本地服务器转发，避开CORS限制：

  "proxy": "https://coffee.alexflipnote.dev"
  

  然后修改fetch地址为相对路径：

  fetch('/random')
  

• 后端代理：如果有自己的后端服务，在后端发起请求获取图片或图片URL，再返回给前端，前端与后端同源就不会触发CORS错误。

额外优化建议 #

尽量避免使用document.querySelector直接操作DOM，React推荐通过状态或refs控制元素类名：

// 新增状态控制模糊类
const [isBlurred, setIsBlurred] = useState(true);

const handleNext = () => {
  fetch('https://coffee.alexflipnote.dev/random')
  .then(res => res.json())
  .then(data => {
    setImage(data.file);
    setIsBlurred(true); // 切换模糊状态
    // 可添加延迟切换回清晰的逻辑，比如：
    // setTimeout(() => setIsBlurred(false), 1000)
  })
}

// 在img标签中用状态控制类名
<img src={image} className={isBlurred ? "blur" : "unblur"} />

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