Esta es mi configuración de axios:
import axios from "axios" const axiosApi = axios.create({ baseURL: import.meta.env.VITE_API_URL }) const requestInterceptor = config => { config.headers['Content-Type'] = 'application/json'; config.headers['Accept'] = 'application/json'; config.headers['X-Client'] = 'React'; return config; } axiosApi.interceptors.request.use(requestInterceptor); const get = async (url) => { return await axiosApi.get(url, { crossDomain: true }).then(response => { return response?.data; }) } const post = async (url, data) => { return await axiosApi .post(url, Array.isArray(data) ? [...data] : { ...data }) .then(response => response?.data) } const form = async (url, data) => { return await axiosApi .post(url, data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }) .then(response => response?.data) } Como puede ver, para post y get métodos de utilidad, utilizo un interceptor de solicitudes que establece los valores predeterminados. Por lo tanto, uso Content-Type: application/json para ellos.
Sin embargo, para el form anulé el encabezado Content-Type para que fuera un formulario.
Leí algunas otras preguntas, que incluyen:
Axios no pasa el encabezado de tipo de contenido
El tipo de contenido del encabezado de Axios no está configurado para safari
Pero mi servidor permite que se envíe Content-Type en solicitudes CORS:
Access-Control-Allow-Headers: authorization,content-type,x-client Access-Control-Allow-Methods: POST Access-Control-Allow-Origin: * Pero cuando uso el método de form , veo que Content-Type no está configurado en application/json , no application/x-www-form-urlencoded .
¿Qué he hecho mal?
Por defecto, Axios tiene un excelente manejo del cuerpo de la solicitud.
application/json .URLSearchParams , usa application/x-www-form-urlencoded .FormData y usará multipart/form-data Entonces, ¿por qué hay un sinfín de preguntas sobre StackOverflow con encabezados content-type personalizados? Incluso iría tan lejos como para argumentar que, a menos que sus API estén utilizando una negociación de contenido adecuada, tampoco necesita meterse con el encabezado Accept .
No veo la necesidad de un interceptor en su caso. Simplemente configure los valores predeterminados del encabezado de la solicitud en su instancia
axiosApi.defaults.headers.common["X-Client"] = "React"; // and if your API actually uses content negotiation... // axiosApi.defaults.headers.common.Accept = "application/json"; En cuanto a su solicitud codificada en URL , Axios 0.x lo admite a través URLSearchParams o una cadena simple. No convertirá automáticamente un objeto simple en application/x-www-form-urlencoded .
Si sus data son un objeto plano, puede usar lo siguiente
const form = async (url, data) => { const encodedData = new URLSearchParams(data); return (await axiosApi.post(url, encodedData)).data; };Si es más complejo, recomendaría usar una biblioteca como qs .
De lo contrario, espere a Axios 1.0 donde aparentemente puede usar
axios.post(url, data, { headers: { "content-type": "application/x-www-form-urlencoded" } });