使用axios进行POST请求时如何传递头部信息

Question

我按照npm软件包文档的建议编写了一个Axios POST请求，例如：

var data = {
    'key1': 'val1',
    'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data)       
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

它可以工作，但现在我已经修改了我的后端API以接受头文件。

Content-Type: 'application/json'

Authorization: 'JWT fefege...'

现在，在Postman上这个请求可以正常工作，但是当我写一个axios的调用时，我遵循这个链接，但却无法完全使其正常工作。

我一直收到400 BAD Request错误。

这是我修改后的请求：

axios.post(Helper.getUserAPI(), {
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'JWT fefege...'
    },
    data
})      
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

- Jagrati

Answer 1

使用Axios时，为了传递自定义头信息，将包含头信息的对象作为最后一个参数传递。

修改您的Axios请求如下：

const headers = {
  'Content-Type': 'application/json',
  'Authorization': 'JWT fefege...'
}

axios.post(Helper.getUserAPI(), data, {
    headers: headers
  })
  .then((response) => {
    dispatch({
      type: FOUND_USER,
      data: response.data[0]
    })
  })
  .catch((error) => {
    dispatch({
      type: ERROR_FINDING_USER
    })
  })

- Shubham Khatri

---

@KishoreJethava，500 是内部服务器错误，请检查服务器端是否有头部信息传输或其他 bug。 - Shubham Khatri

@KishoreJethava，你能否在你的服务器上记录头部信息并查看是否获取到了正确的值？ - Shubham Khatri

你不需要发布任何数据吗？而且确保this.state.token包含一个值。 - Shubham Khatri

让我们在聊天中继续这个讨论。 - Kishore Jethava

@ShubhamKhatri，可以请您看一下这里关于axios的问题吗：https://stackoverflow.com/questions/59470085/vue-js-validation-fails-for-file-upload-in-axios-when-multipart-form-data-used？ - Istiaque Ahmed

Answer 2

这是一个完整的例子，展示如何使用自定义头部发送 axios.post 请求。

var postData = {
  email: "[e-mail]",
  password: "password"
};

let axiosConfig = {
  headers: {
      'Content-Type': 'application/json;charset=UTF-8',
      "Access-Control-Allow-Origin": "*",
  }
};

axios.post('http://<host>:<port>/<path>', postData, axiosConfig)
.then((res) => {
  console.log("RESPONSE RECEIVED: ", res);
})
.catch((err) => {
  console.log("AXIOS ERROR: ", err);
})

- Matthew Rideout

---

遇到了一个关于GET请求的问题。响应以XML格式返回。这并不能解决问题。 - Eswar

请注意，此操作仅适用于支持JSON响应的API。请添加以下内容：headers: { 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "*", "Accept": "application/json" } - Akhil

为什么这个被点赞得这么多？Access-Control-Allow-Origin是一个响应头，对于在JavaScript中发送的请求头没有任何影响... - Heretic Monkey

Answer 3

要在 Axios POST 请求中设置标头，请将第三个对象传递给 axios.post() 调用。

const token = '..your token..'

axios.post(url, {
  //...data
}, {
  headers: {
    'Authorization': `Basic ${token}` 
  }
})

要在 Axios 的 GET 请求中设置头信息，请向 axios.get() 调用传递第二个对象。

const token = '..your token..' 

axios.get(url, {
  headers: {
    'Authorization': `Basic ${token}`
  }
})

- Lalit Mohan

Answer 4

const data = {
  email: "[e-mail]",
  username: "me"
};

const options = {
  headers: {
      'Content-Type': 'application/json',
  }
};

axios.post('http://path', data, options)
 .then((res) => {
   console.log("RESPONSE ==== : ", res);
 })
 .catch((err) => {
   console.log("ERROR: ====", err);
 })

所有400以上的状态码都会在Axios catch块中被捕获。

此外，Axios中的post方法可以选择性地包含头部信息。

- Fahd Jamy

Answer 5

你也可以使用拦截器来传递头信息

这样可以节省大量代码

axios.interceptors.request.use(config => {
  if (config.method === 'POST' || config.method === 'PATCH' || config.method === 'PUT')
    config.headers['Content-Type'] = 'application/json;charset=utf-8';

  const accessToken = AuthService.getAccessToken();
  if (accessToken) config.headers.Authorization = 'Bearer ' + accessToken;

  return config;
});

- Israel kusayev

---

我建议使用 config.method.toUpperCase()。 - Constantine

不幸的是，我的更低。 - Constantine

Answer 6

我们可以将头部信息作为参数传递。

onClickHandler = () => {
  const data = new FormData();
  for (var x = 0; x < this.state.selectedFile.length; x++) {
    data.append("file", this.state.selectedFile[x]);
  }

  const options = {
    headers: {
      "Content-Type": "application/json",
    },
  };

  axios
    .post("http://localhost:8000/upload", data, options, {
      onUploadProgress: (ProgressEvent) => {
        this.setState({
          loaded: (ProgressEvent.loaded / ProgressEvent.total) * 100,
        });
      },
    })
    .then((res) => {
      // then print response status
      console.log("upload success");
    })
    .catch((err) => {
      // then print response status
      console.log("upload fail with error: ", err);
    });
};

- Codemaker

Answer 7

Shubham的答案对我没用。

当你使用Axios库并传递自定义头文件时，需要将头文件构建为一个带有键名'headers'的对象。'headers'键应包含一个对象，这里是Content-Type和Authorization。

下面的示例运行良好。

var headers = {
    'Content-Type': 'application/json',
    'Authorization': 'JWT fefege...' 
}

axios.post(Helper.getUserAPI(), data, {"headers" : headers})
    .then((response) => {
        dispatch({type: FOUND_USER, data: response.data[0]})
    })
    .catch((error) => {
        dispatch({type: ERROR_FINDING_USER})
    })

- Hemadri Dasari

Answer 8

axios.post可以接受3个参数，其中最后一个参数可以接受一个config对象，您可以在其中设置头信息。

带有您问题的示例代码：

var data = {
'key1': 'val1',
'key2': 'val2'
}
axios.post(Helper.getUserAPI(), data, {
        headers: {Authorization: token && `Bearer ${ token }`}
})       
.then((response) => {
    dispatch({type: FOUND_USER, data: response.data[0]})
})
.catch((error) => {
    dispatch({type: ERROR_FINDING_USER})
})

- mahdi momeni

Answer 9

如果您正在使用Vue.js原型中无法在创建时读取的某些属性，您也可以定义标头并编写如下内容。

storePropertyMaxSpeed(){
  axios
    .post(
      "api/property",
      {
        property_name: "max_speed",
        property_amount: this.newPropertyMaxSpeed,
      },
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: "Bearer " + this.$gate.token(),
        },
      }
    )
    .then(() => {
      //this below peace of code isn't important
      Event.$emit("dbPropertyChanged");

      $("#addPropertyMaxSpeedModal").modal("hide");

      Swal.fire({
        position: "center",
        type: "success",
        title: "Nova brzina unešena u bazu",
        showConfirmButton: false,
        timer: 1500,
      });
    })
    .catch(() => {
      Swal.fire("Neuspješno!", "Nešto je pošlo do đavola", "warning");
    });
};

- Dach0

Answer 10

拦截器

我曾经遇到过同样的问题，原因是我在拦截器中没有返回响应。Javascript 正确地认为我想要为该 Promise 返回 undefined：

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

- toraman