如何在RTK Query端点覆盖prepareHeaders设置的Accept-Language？

问题核心在于执行顺序：端点里定义的headers会先被合并到请求头中，之后才会调用prepareHeaders函数。你原来的prepareHeaders会无条件设置Accept-Language，自然就把端点里的设置覆盖了。

只需要修改prepareHeaders的逻辑，让它只在请求头中没有Accept-Language时，才用i18n的语言设置：

import { fetchBaseQuery, retry } from '@reduxjs/toolkit/dist/query/react'
import i18n from 'i18next';

export const baseQuery = retry(
  fetchBaseQuery({
    timeout: 5000,
    headers: {
      'Content-Type': 'application/json;charset=utf-8',
      'Access-Control-Allow-Origin': '*'
    },
    prepareHeaders: (headers) => {
      if (accessToken) {
        // 仅当请求头中未设置Accept-Language时，才使用i18n的语言
        if (!headers.has('Accept-Language')) {
          headers.set('Accept-Language', i18n.language);
        }
      }
      return headers;
    },
  }),
  { maxRetries: 3 }
);

你的端点代码不需要改动，保持原来的写法即可：

export const sampleApi = createApi({
  reducerPath: 'sampleApi',
  baseQuery: baseQuery,
  endpoints: (builder) => ({
    getLotteryOdds: builder.query({
      query: () => ({
        url: '/sample',
        method: 'GET',
        headers: {
          'Accept-Language': 'en'
        }
      }),
    }),
  })
})

这样一来，当端点指定了Accept-Language时，prepareHeaders会跳过设置，直接保留端点的配置；没指定时，就用i18n的当前语言，完美满足你的需求。

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