axios 模板中的动态请求问题 header

Question

在我的 React 应用程序中，我创建了一个 api.js 文件，该文件创建了一个带有 axios.create 的 api object 并将其导出为默认值。因此，我使用该模板发出 API 请求。问题是，创建的 axios api object 中的 header 之一必须是动态的。例如，参见下面的 locale header：

一开始可能是这样的：

export default api = axios.create({
    baseURL: process.env.REACT_APP_API_URL,
    headers: {
      post: {
        "Content-Type": "application/json;charset=utf-8",
        "Access-Control-Allow-Origin": "*",
        locale: "en",
      },
      get: {
        locale: "en",
      },
    },
  });

但一段时间后它可以更新到其他语言环境，例如 "en" 应该更改为 "fr"。我如何更新它，并确保它在更新时会在每个地方发生变化 api 被导入。

我不能使用 ContextApi 等，因为我也需要在 index.js 文件中使用那个 api，因为它不是反应组件，所以不支持使用钩子.

Answer 1

听起来像是 Axios interceptors...

的工作

import axios from "axios"

// some kind of storage for your locale
let locale = "en"

// some way of changing it
export const setLocale = (newLocale) => {
  locale = newLocale
}

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
})

// register a synchronous request interceptor
api.interceptors.request.use(config => ({
  ...config,
  headers: {
    ...config.headers,
    locale // merge the "locale" into the request config headers
  }
}), null, { synchronous: true })

export default api

此外，Access-Control-Allow-Origin 是来自服务器的响应 header。它不属于您的请求，通常很可能会导致 CORS 错误。

另外，在axios中发布JS objects时默认的content-type是application/json所以you typically don't need to set it.

axios 模板中的动态请求问题 header

Problem with dynamic request header in axios template

javascript

api

locale

axios