React开发类Netflix应用遇Unhandled Rejection: Failed to fetch错误求助

问题概述 #

开发类Netflix作品集应用（基于React）时，遇到以下未捕获的错误：

Unhandled Rejection(TypeError): Failed to fetch.

疑似问题出在Fetch请求的.then((response...)环节，相关代码片段：

const [movies, setMovies] = useState([]);

useEffect(() => {
    fetch("https://movies-couch-api-herra17.vercel.app/movies") 
    .then((response) => response.json())
    .then((data) => {
        console.log(data); 
        // 此处缺少setMovies调用与代码闭合逻辑
    })
    // 未添加错误捕获处理
}, []);

项目依赖：prop-types、react、react-dom、parcel/transformer-sass，入口文件index.jsx代码：

import { createRoot} from 'react-dom/client';
import { MainView } from './components/main-view/main-view';
// Import statement to indicating bundle is needed import "./index.scss";
// Main component (will eventually use all others)
const MoviescouchApplication = () => { return <MainView />; }; 
// Find the root of your app 
const container = document.querySelector("#root"); 
const root = createRoot(container);
// Tells React to render your app in the root DOM element 
root.render(<MoviescouchApplication/>);

排查方向 #

• 添加错误捕获逻辑：当前代码未处理Fetch的Promise拒绝，导致Unhandled Rejection。补充.catch块或改用async/await + try/catch，获取具体错误信息：

  // 方式1：添加catch
  fetch("https://movies-couch-api-herra17.vercel.app/movies")
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error("Fetch错误:", err));
  
  // 方式2：async/await写法
  useEffect(() => {
    const fetchMovies = async () => {
      try {
        const response = await fetch("https://movies-couch-api-herra17.vercel.app/movies");
        const data = await response.json();
        console.log(data);
      } catch (err) {
        console.error("Fetch错误:", err);
      }
    };
    fetchMovies();
  }, []);
  

• 校验API响应状态：Fetch仅在网络层面失败时才会reject，HTTP 4xx/5xx错误不会触发reject。需手动检查响应状态：

  fetch("https://movies-couch-api-herra17.vercel.app/movies")
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP错误，状态码: ${response.status}`);
      }
      return response.json();
    })
    .then(data => console.log(data))
    .catch(err => console.error(err));
  

• 检查跨域（CORS）问题：本地开发环境（如Parcel默认端口）与API域名不同时，可能触发CORS限制。打开浏览器控制台的「Network」标签，查看请求的响应头是否包含Access-Control-Allow-Origin，或是否有CORS相关错误提示。
• 确认请求URL正确性：检查URL拼写、是否需要添加请求头（如Content-Type: application/json），或API是否需要认证参数。
• Parcel代理配置：若为本地开发，可在package.json中配置代理规避CORS：

  "proxy": "https://movies-couch-api-herra17.vercel.app"
  

  之后请求改为相对路径：fetch("/movies")

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