配置axios.defaults.baseURL后向其他服务发起请求报404如何解决

你在api/agent.ts中修改了Axios的全局默认配置，只要项目中其他文件导入的是同一个axios包实例，都会默认继承你设置的baseURL: "http://localhost:8800/api"，所以请求dummy_data.json时自动拼接了接口前缀，同时你当前写的请求路径/dummy_data.json和实际文件存储路径public/dummyData/dummy_data.json不匹配，两个问题共同导致了404错误。

方案1：单次请求覆盖全局baseURL（临时快速解决） #

修改fetcher.tsx中的get方法，请求时传入空的baseURL覆盖全局配置即可：

import axios from "axios"

export async function get<T>(path: string): Promise<T> {
    const { data } = await axios.get(path, { baseURL: '' })
    return data
}

同时修改组件中的请求路径为实际存储路径：

const result = await get<Manga[]>("/dummyData/dummy_data.json")

方案2：创建独立Axios实例（推荐，避免配置冲突） #

不要直接修改Axios全局配置，不同业务场景用独立的Axios实例隔离配置，从根源避免互相影响：

1. 先修改api/agent.ts，把业务接口的配置改成独立实例：

import axios, { AxiosResponse } from "axios"

// 自研接口用单独的实例，不污染全局配置
const apiAxios = axios.create({
  baseURL: "http://localhost:8800/api"
})

const responseBody = <T>(response: AxiosResponse<T>) => response.data

const requests = {
    get: <T>(url: string) => apiAxios.get<T>(url).then(responseBody),
    post: <T>(url: string, body: {}) => apiAxios.post<T>(url, body).then(responseBody),
    put: <T>(url: string, body: {}) => apiAxios.put<T>(url, body).then(responseBody),
    del: <T>(url: string) => apiAxios.delete<T>(url).then(responseBody),
}

2. 修改fetcher.tsx，使用无额外配置的独立Axios实例，或者直接用原生fetch更轻量：

// 选项A：独立Axios实例
import axios from "axios"
const staticAxios = axios.create()

export async function get<T>(path: string): Promise<T> {
    const { data } = await staticAxios.get(path)
    return data
}

// 选项B：原生fetch，不需要依赖Axios
export async function get<T>(path: string): Promise<T> {
  const res = await fetch(path)
  if (!res.ok) throw new Error('静态资源请求失败')
  return res.json() as Promise<T>
}

3. 同样修改组件中的请求路径为/dummyData/dummy_data.json即可。

方案3：直接传入完整绝对路径 #

请求时传入带域名的完整路径，Axios检测到路径是完整http/https开头的地址时，会自动跳过全局baseURL拼接：

const result = await get<Manga[]>(`${window.location.origin}/dummyData/dummy_data.json`)

你当前组件中setData(result)之后直接打印data拿到的是旧值，因为React的state更新是异步的，如果你需要查看拿到的结果，直接打印result即可。

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