javascript - Axios 不尊重 Content-Type header

Question

这是我的 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)
}

如您所见，对于 post 和 get 实用程序方法，我使用了一个设置默认值的请求拦截器。因此，我为他们使用 Content-Type: application/json。

但是，对于 form，我将 Content-Type header 覆盖为一个表单。

我读了一些其他问题，包括:

Axios not passing Content-Type header

Axios Header's Content-Type not set for safari

但是我的服务器允许在 CORS 请求中发送 Content-Type:

Access-Control-Allow-Headers: authorization,content-type,x-client
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: *

但是当我使用 form 方法时，我看到 Content-Type 没有设置为 application/json，不是 application/x-www-form-urlencoded.

我做错了什么？

Answer 1

默认情况下，Axios 具有出色的请求正文处理。

• 如果它看到一个普通的 JavaScript 对象或数组，它会使用 application/json。
• 如果您传入纯字符串或 URLSearchParams 实例，它会使用 application/x-www-form-urlencoded。
• 传入一个 FormData 实例，它将使用 multipart/form-data

那么，为什么在 StackOverflow 上有无数关于自定义 content-type header 的问题？我什至会争辩说，除非您的 API 使用正确的 content negotiation ，您也不需要弄乱 Accept header 。

我认为您的情况不需要拦截器。只需在您的实例上设置请求 header 默认值

axiosApi.defaults.headers.common["X-Client"] = "React";
// and if your API actually uses content negotiation...
// axiosApi.defaults.headers.common.Accept = "application/json";

至于您的url-encoded 请求，Axios 0.x 通过URLSearchParams 或纯字符串支持。它不会自动将普通对象转换为 application/x-www-form-urlencoded。

如果你的data是一个平面对象，你可以使用下面的

const form = async (url, data) => {
  const encodedData = new URLSearchParams(data);
  return (await axiosApi.post(url, encodedData)).data;
};

如果它更复杂，我建议使用类似 qs 的库.

否则，请等待 Axios 1.0，您可以apparently使用

axios.post(url, data, {
  headers: { "content-type": "application/x-www-form-urlencoded" }
});