使用fetch()调用Flixed API报TypeError: Failed to fetch求助

核心原因分析 #

虽然你看到请求状态码是200，但TypeError: Failed to fetch在跨域场景下，本质是浏览器的CORS安全机制拦截了响应——哪怕请求已经发送到API服务器并返回了结果，只要服务器返回的响应头不符合CORS规则，浏览器就会阻止JavaScript读取响应，直接抛出这个错误。而Postman/浏览器直接访问不受CORS限制，所以能正常拿到数据。

具体排查与解决方案 #

1. 先确认CORS问题的具体细节

打开浏览器开发者工具（F12）：

• 切换到Network面板，触发按钮请求，找到Flixed API的请求，查看Response Headers：
  • 如果没有Access-Control-Allow-Origin头部，或者该头部的值不包含你当前网页的域名（比如http://localhost:8080或你的线上域名），那就是明确的CORS限制问题。
• 切换到Console面板，查看是否有更详细的CORS报错信息（比如No 'Access-Control-Allow-Origin' header is present on the requested resource），这能帮你确认问题根源。

2. 最可靠的解决方案：后端代理

前端直接跨域请求受浏览器限制，后端请求则没有这个限制。你可以搭一个简单的后端代理服务，前端请求自己的后端，由后端去调用Flixed API并返回结果。

以Node.js+Express为例（新手易上手）：

• 安装依赖：

  npm install express node-fetch
  

• 创建server.js文件：

  const express = require('express');
  const fetch = require('node-fetch');
  const app = express();
  const port = 3000;
  
  // 代理接口
  app.get('/api/flixed-movie', async (req, res) => {
    const imdbId = req.query.imdbId;
    const apiKey = '8MqjZtMPW1LUUEydpqjzULeQ6EmBfbEg'; // 替换为你的Flixed API密钥
    try {
      const apiResponse = await fetch(`https://api.flixed.io/v1/movies/${imdbId}?idType=imdb&apiKey=${apiKey}`);
      const data = await apiResponse.json();
      res.json(data);
    } catch (err) {
      res.status(500).json({ error: err.message });
    }
  });
  
  app.listen(port, () => {
    console.log(`代理服务运行在 http://localhost:${port}`);
  });
  

• 修改前端代码，请求自己的代理服务：

  fetch("http://localhost:3000/api/flixed-movie?imdbId=0208092", {
    method: 'GET',
  })
    .then(response => response.json())
    .then((data) => {
      const results = document.getElementById("resultsText");
      results.innerText = JSON.stringify(data, null, 2); // 将JSON转为格式化字符串，避免显示[object Object]
      results.style.display = "block";
    })
    .catch((error) => {
      const results = document.getElementById("resultsText");
      results.innerText = error.message;
      results.style.display = "block";
    });
  

• 注意：线上部署时，需将代理服务和前端部署在同一域名下，或给代理服务配置CORS允许你的前端域名访问。

3. 检查Flixed API的CORS配置

登录Flixed的API控制台，查看是否有允许域名配置选项——部分API需要你手动添加信任的前端域名，才会返回正确的CORS响应头。如果有这个选项，把你的网页域名加进去即可。

4. 修复代码中的小问题

你当前代码里results.innerText = data;存在问题：data是JSON对象，直接赋值会显示[object Object]，改为JSON.stringify(data, null, 2)可以格式化显示JSON内容，方便调试。

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