无法在 axios 中设置标题

Question

我无法通过 axios 设置标题，例如内容类型为应用程序/json。 axios 没有抛出异常，但请求在浏览器中得到“415 Unsupported Media Type”响应。有什么线索我错了吗？

以下是代码-

我尝试了两种方法。

方法 1 -

import axios from 'axios';
axios.defaults.headers.common['Content-Type'] = 'application/json';
axios.get(url).then(
  response => this.loadData(response)).catch(
  (error) => this.showError(error));

方法 2 -

let config = {
    headers: {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json"
    }
};
axios.get(url, config).then(
      response => this.loadData(response)).catch(
      (error) => this.showError(error));

Answer 1

您收到该错误是因为您没有使用您期望服务器响应的正确内容类型设置 Accept 标头。

为了避免这种情况，例如，您可以创建一个 Axios 实例（以便稍后在您在 React.js 应用程序中执行 Axios 调用的任何地方将其导入），您可以在其中设置您将执行的所有调用的默认标头与 Axios。例如：

import axios from 'axios';

const instance = axios.create({
  baseURL: [YOUR BASE URL],
  timeout: 5000,
  headers: {
    'Accept-Version': 1,
    'Accept': 'application/json',
    'Access-Control-Allow-Origin': '*',
    'Content-Type': 'application/json; charset=utf-8',
  },
});

export default instance;

因此，您所做的所有调用都将具有正确的标题，您不必担心它们是否被正确设置。我还假设您只是要处理 json 正文请求和响应。