使用 axios POST 请求传递标头

使用 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
    })
  })

以下是带有自定义标头的 axios.post 请求的完整示例

var postData = {电子邮件：“test@test.com”，密码：“密码”}；让 axiosConfig = { headers: { 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "*", } }; axios.post('http://:/', postData, axiosConfig) .then((res) => { console.log("RESPONSE RECEIVED: ", res); }) .catch((err) => { console.log("AXIOS ERROR: ", err); })

要在 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}`
  }
})

常量数据 = { 电子邮件：“me@me.com”，用户名：“我”}； const options = { headers: { 'Content-Type': 'application/json', } }; axios.post('http://path', data, options) .then((res) => { console.log("RESPONSE ==== : ", res); }) .catch((err) = > { console.log("错误: ====", err); })

所有高于 400 的状态码都会被 Axios 的 catch 块捕获。

此外，标题对于 Axios 中的 post 方法是可选的

您还可以使用拦截器来传递标头

它可以为您节省大量代码

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;
});

Shubham 的 answer 对我不起作用。

当您使用 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})
    })

我们可以将标头作为参数传递，

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);
    });
};

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})
})

如果您使用 vuejs 原型中的某些属性在创建时无法读取，您还可以定义标题并编写即

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");
    });
};

拦截器

我有同样的问题，原因是我没有在拦截器中返回响应。 Javascript 理所当然地认为，我想为承诺返回 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);
  });