En mi aplicación de reacción, creé un archivo api.js que crea un objeto api con axios.create y lo exporta de forma predeterminada. Entonces, uso esa plantilla para hacer las solicitudes de API. El problema es que uno de los encabezados en el objeto axios api creado debe ser dinámico. Por ejemplo, vea el encabezado de locale a continuación:
Al principio puede ser algo como esto:
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", }, }, }); Pero después de un tiempo, se puede actualizar a alguna otra configuración regional, como "en" debe cambiarse con "fr" , por ejemplo. ¿Cómo puedo actualizarlo y asegurarme de que cuando se actualice cambie en cada lugar donde se importe la api ?
No puedo usar ContextApi, etc., porque también necesito usar esa API en el archivo index.js , que, debido a que no es un componente de reacción, no admite el uso de ganchos.
Suena como un trabajo para los interceptores Axios ...
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 Además, Access-Control-Allow-Origin es un encabezado de respuesta que proviene del servidor. No pertenece a su solicitud y, en general, es muy probable que cause errores de CORS.
Además, el tipo de contenido predeterminado al publicar objetos JS en Axios es application/json , por lo que normalmente no es necesario configurarlo .