如何用Redux Toolkit的createApi配置API请求头？

你的代码存在两个核心问题，直接导致请求失败：

1. prepareHeaders未返回处理后的请求头 #

fetchBaseQuery的prepareHeaders函数必须返回修改后的headers对象，你的代码只执行了headers.set操作但没有返回，导致自定义请求头无法被正确携带到请求中。

2. API请求路径错误 #

Urban Dictionary的RapidAPI接口是通过**查询参数term**传递要查询的单词，而非路径参数。原代码把单词作为路径拼接，会生成不符合API规范的错误请求地址。

修正后的完整代码 #

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
import { TWord } from "../../types/wordType";

export const apiSlice = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({
    baseUrl: "https://mashape-community-urban-dictionary.p.rapidapi.com",
    prepareHeaders: (headers) => {
      headers.set("X-RapidAPI-Key", "<my key>");
      headers.set("X-RapidAPI-Host", "mashape-community-urban-dictionary.p.rapidapi.com");
      // 必须返回处理后的headers
      return headers;
    },
  }),
  tagTypes: ["Words"],
  endpoints: (builder) => ({
    getWord: builder.query<TWord, string>({
      // 使用查询参数term传递目标单词
      query: (word) => ({
        url: "/define",
        params: {
          term: word
        }
      }),
    }),
  }),
});

export const { useGetWordQuery } = apiSlice;

关键修改说明 #

• 返回headers：在prepareHeaders末尾添加return headers;，确保自定义请求头被正确注入请求。
• 调整请求结构：将baseUrl改为API根域名，endpoint的url设为/define，通过params传递term参数，完全匹配API的请求规范。
• 明确泛型类型：给builder.query添加<TWord, string>泛型约束，强化类型检查，避免潜在的类型错误。

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