通过axios POST请求传递标头


133

我已经按照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 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})
})

任何帮助是极大的赞赏。

Answers:


240

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

@ KishoreJethava,500是内部服务器错误,您可以在服务器端检查是否出现标题或是否有其他错误
Shubham Khatri

@KishoreJethava,您能只在服务器中记录标头,看看是否获得正确的值吗?
Shubham Khatri

您不需要发布任何数据吗?还要确保this.state.token包含一个值
Shubham Khatri


@ShubhamKhatri,请问您在axios这里查看一个相关的问题:stackoverflow.com/questions/59470085/…
Istiaque Ahmed

37

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

var postData = {
  email: "test@test.com",
  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);
})


面对这个问题以获取请求。响应以xml格式进行。这不能解决问题。
Eswar,

3

这可能会有所帮助,

const data = {
  email: "me@me.com",
  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捕获块捕获。此外,标头对于Axios中的post方法是可选的

块引用

块引用


2

Shubham的答案对我不起作用。

使用axios库并传递自定义标头时,需要将标头构造为键名称为“ 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})
        })

1

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

它可以节省很多代码

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

我建议使用config.method.toUpperCase()
君士坦丁

@Constantine我认为它已经是大写字母了
以色列kusayev

不幸的是,我的位置更低
君士坦丁

0

或者,如果您正在使用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");
                })
            }
        },

-4

Json必须使用双引号格式化

喜欢:

headers: {
                "Content-Type": "application/Jason",
                "Authorization": "JWT fefege..."
            }

不只是:

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

JSON格式是正确的,但是使用javascript时,您可以根据需要编写javascript字符串,并且它仍然可以工作-因为axios中的JSON序列化器不知道两者之间的区别!:-)
Jono
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.