无法在 axios 中设置标题

Posted 2023-02-22

【中文标题】无法在 axios 中设置标题

【英文标题】：unable to set header in axios

【发布时间】：2018-09-21 03:03:22

【问题描述】：

我无法通过 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));

【问题讨论】：

不需要设置content-type application/json，它会自动设置，另一个header Access-Control-Allow-Origin 需要允许从你的后端服务器（快递）而不是你的react app.try 删除两个标题

我不认为你是sending json。

【参考方案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 正文请求和响应。

【讨论】：

这里需要内容类型吗？对我来说，这个问题看起来像是使用内容类型而不是接受。内容类型通常不应与 get 请求一起使用。

你是对的，对于 GET 请求 Content-Type 是不需要的，但是我为所有类型的请求提出了一个通用的解决方案，所以 OP 不需要担心在所有调用中设置正确的标头.这里出现的问题确实是缺少“接受”标题，所以我将重写答案以突出显示它。

@Dez 出于某种原因，我点击的 Web 服务似乎配置不正确。即使在邮递员中，只有当我在 Get 请求中指定 Content-Type 时，我才能得到正确的响应，否则我会出错。您的上述解决方案无助于设置标题。在浏览器中，我的请求在 OPTIONS 级别本身失败。

如果您收到的是 OPTIONS 请求而不是 GET 请求，则说明您遇到了 CORS 问题。

是的，我正在访问的服务存在 CORS 问题。但同时，创建 axios 实例也很有帮助。谢谢