传递带有axios POST请求的头文件

我已经按照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接受头文件。

内容类型:“application / json” 授权:“JWT fefege…”

现在，这个请求在Postman上工作得很好，但在编写axios调用时，我遵循了这个链接，但不能完全使其工作。

我经常得到400坏请求错误。

这是我修改后的请求:

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

当前回答

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

2020-10-22 11:35:50

其他回答

Const data = { 电子邮件:“me@me.com”, 用户名:“我” }; Const选项= { 标题:{ “内容类型”:“application / json”, ｝ }; axios。post('http://path'，数据，选项) .then((res) => { console.log("RESPONSE ====: "， res); }) .catch((err) => { console.log("ERROR: ===="， err); })

所有超过400的状态代码都将被Axios捕获块捕获。

同样，对于Axios中的post方法，头是可选的

2019-09-10 07:22:54

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

2020-10-22 11:35:50

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

它可以为您节省大量代码

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

2020-06-19 10:24:11

拦截器

我也有同样的问题，原因是我没有在拦截器中返回响应。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);
  });

2020-11-20 20:19:03

如果你正在使用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");
    });
};

2019-07-11 13:17:07

传递带有axios POST请求的头文件

推荐文章

最新文章

标签