开发Netflix克隆项目时调用TMDB API遇Axios 404错误求助

核心问题分析 #

1. Axios实例使用错误：你在Row.js中导入了原生axios，而非自己在axios.js中创建的带TMDB baseURL的自定义实例，导致请求被发送到本地开发服务器（而非TMDB API域名），引发404。
2. 缺少API Key参数：TMDB的所有接口请求都必须携带api_key参数，你的代码中未配置该参数。
3. useEffect依赖缺失：useEffect的依赖数组为空，当fetchUrl变化时不会重新触发请求。

分步修复 #

1. 修正Axios实例导入 #

在Row.js中，将原生axios的导入替换为你自定义的实例：

// Row.js 顶部导入修改
import React, { useState, useEffect } from 'react';
import axios from './axios'; // 替换成你的axios.js文件的正确路径

2. 配置TMDB API Key #

在axios.js中添加默认api_key参数，确保所有请求自动携带该参数（建议使用环境变量存储API Key，避免硬编码）：

// axios.js 修改后
import axios from "axios";

const instance = axios.create({
    baseURL: "https://api.themoviedb.org/3",
    params: {
        api_key: process.env.REACT_APP_TMDB_API_KEY // 用环境变量存储Key，或直接替换为你的Key
    }
});

export default instance;

如果使用环境变量，需要在项目根目录创建.env文件，内容为：

REACT_APP_TMDB_API_KEY=你的TMDB API Key

3. 完善useEffect依赖与错误处理 #

在Row.js的useEffect中添加fetchUrl作为依赖，并增加错误捕获：

// Row.js 中useEffect部分修改
useEffect(() => {
    async function fetchData() {
        try {
            const request = await axios.get(fetchUrl);
            setMovies(request.data.results); // 存储返回的电影数据
            console.log(request);
        } catch (error) {
            console.error("请求失败:", error);
        }
    }
    fetchData();
}, [fetchUrl]); // 添加fetchUrl到依赖数组

验证修复 #

完成以上修改后，重启开发服务器，请求将正确发送到TMDB API域名并携带API Key，404错误应该会消失，同时能正常获取电影数据。

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