在react应用中进行api请求时，axios是一个广泛使用的http客户端库。然而，开发者有时会遇到api请求返回“404 not found”的错误，即使api在postman等工具中运行正常。这通常不是api本身的问题，而是客户端代码中axios配置或使用方式不当所致。一个常见的误区是，虽然创建了自定义的axios实例并配置了baseurl，但在实际的组件中却错误地使用了默认的axios对象进行请求。
当Axios返回404错误，并伴随类似Uncaught (in promise) AxiosError {message: 'Request failed with status code 404', name: 'AxiosError', code: 'ERR_BAD_REQUEST', ...}的错误信息时，这通常意味着请求的URL不正确。如果你的应用中已经创建了一个带有baseURL的Axios实例，但请求仍然失败，那么很可能是你没有正确地使用这个实例。
考虑以下场景：你创建了一个axios.js文件来配置一个带有baseURL的Axios实例：
// axios.js
import axios from "axios";
// 创建一个预配置的Axios实例，设置了baseURL
const instance = axios.create({
baseURL: "https://api.themoviedb.org/3", // 电影数据库的API基础URL
});
export default instance; // 导出这个自定义实例而在你的React组件（例如Row.js）中，你试图发起API请求：
// Row.js (存在问题代码)
import React, { useState, useEffect } from 'react';
import axios from 'axios'; // ❌ 错误：这里导入的是默认的Axios库，而不是我们自定义的实例
export default function Row({title, fetchUrl})
{
const [movies, setMovies] = useState([])
useEffect(() => {
async function fetchData() {
// ❌ 错误：这里使用了默认的axios对象，它没有我们配置的baseURL
const request = await axios.get(fetchUrl);
console.log(request);
}
fetchData();
}, []);
return (
<div>
<h2>{title}</h2>
</div>
)
}在这种情况下，Row.js中的axios.get(fetchUrl)实际上会尝试向当前应用所在的域（例如http://localhost:3000）发送请求，并拼接fetchUrl（例如/trending/all/week）。由于它没有使用axios.js中配置的baseURL，最终请求的URL会变成http://localhost:3000/trending/all/week，这显然不是一个有效的API端点，因此会返回404错误。
解决这个问题的关键在于确保你的组件正确地导入并使用了你自定义的Axios实例，而不是默认的Axios库。
导入自定义Axios实例： 在你的Row.js组件中，你需要从axios.js文件导入你导出的instance。
// Row.js (修正后的代码)
import React, { useState, useEffect } from 'react';
// ✅ 正确：从本地的axios.js文件导入我们自定义的Axios实例
import instance from './axios'; // 假设axios.js在同级目录，根据实际路径调整
export default function Row({title, fetchUrl})
{
const [movies, setMovies] = useState([])
useEffect(() => {
async function fetchData() {
// ✅ 正确：现在使用我们自定义的instance发起请求
// instance会根据其配置的baseURL自动拼接fetchUrl
const request = await instance.get(fetchUrl);
console.log(request);
}
fetchData();
}, []);
return (
<div>
<h2>{title}</h2>
</div>
)
}通过上述修改，当Row.js中的fetchData函数被调用时，instance.get(fetchUrl)会使用axios.js中配置的baseURL（即https://api.themoviedb.org/3）与fetchUrl（例如/trending/all/week）进行拼接，最终形成正确的API请求URL：https://api.themoviedb.org/3/trending/all/week，从而成功获取数据。
路径准确性： 确保import instance from './axios';中的路径是正确的，指向你的axios.js文件。如果axios.js在不同的目录下，你需要调整相对或绝对路径。
为什么使用axios.create()？
API Key管理： 像TMDB API这样的服务通常需要API Key。在实际应用中，API Key不应直接硬编码在代码中，而应通过环境变量（例如.env文件）进行管理，以提高安全性和灵活性。
// .env文件
REACT_APP_TMDB_API_KEY=YOUR_API_KEY_HERE
// axios.js 中使用
const instance = axios.create({
baseURL: "https://api.themoviedb.org/3",
params: {
api_key: process.env.REACT_APP_TMDB_API_KEY, // 自动附加API Key
}
});错误处理： 在useEffect中的fetchData函数内部，应添加try...catch块来处理可能发生的网络错误或其他API响应错误，提升用户体验。
useEffect(() => {
async function fetchData() {
try {
const request = await instance.get(fetchUrl);
setMovies(request.data.results); // 假设API返回的数据结构
} catch (error) {
console.error("API请求失败:", error);
// 可以根据错误类型进行不同的处理，例如显示错误消息给用户
}
}
fetchData();
}, [fetchUrl]); // 如果fetchUrl会变化，将其加入依赖数组依赖数组： useEffect的依赖数组非常重要。如果fetchUrl是外部传入的props，并且可能会变化，请将其添加到依赖数组中，以便在fetchUrl改变时重新发起请求。
当你在React应用中使用Axios遇到404错误时，特别是在你已经创建了自定义Axios实例的情况下，首要的排查方向是检查你的组件是否正确导入并使用了这个自定义实例。混淆使用默认的axios对象和自定义的instance是导致baseURL配置失效、进而引发404错误的常见原因。遵循本文提供的指导，确保Axios实例的正确导入与调用，将能有效解决这类API请求问题，并构建更健壮、可维护的React应用。
以上就是React应用API请求404错误排查：Axios实例的正确导入与调用的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
600
收藏
