json 使用 axios POST 请求传递标头

Passing headers with axios POST request

提问by Jagrati

I have written an axios POST request as recommended from the npm package documentation like:

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

And it works, but now I have modified my backend API to accept headers.

它有效，但现在我修改了我的后端 API 以接受标头。

Content-Type: 'application/json'

Authorization: 'JWT fefege...'

内容类型：'应用程序/json'

授权：'JWT fefege...'

Now, this request works fine on Postman, but when writing an axios call, I follow this linkand can't quite get it to work.

现在，这个请求在 Postman 上工作正常，但是在编写 axios 调用时，我点击了这个链接并且无法让它工作。

I am constantly getting 400 BAD Requesterror.

我不断收到400 BAD Request错误。

Here is my modified 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})
})

Any help is greatly appreciated.

任何帮助是极大的赞赏。

回答by Shubham Khatri

When using axios, in order to pass custom headers, supply an object containing the headers as the last argument

使用 axios 时，为了传递自定义标头，请提供一个包含标头的对象作为最后一个参数

Modify your axios request like:

修改您的 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
    })
  })

回答by Matthew Rideout

Here is a full example of an axios.post request with custom headers

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

var postData = {
  email: "[email protected]",
  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);
})

回答by Fahd Jamy

This might be helpful,

这可能会有所帮助，

const data = {
  email: "[email protected]",
  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 方法是可选的

Blockquote

块引用

Blockquote

块引用

回答by Hemadri Dasari

Shubham answer didn't work for me.

Shubham 的回答对我不起作用。

When you are using axios library and to pass custom headers, you need to construct headers as an object with key name "headers". The headers key should contain an object, here it is Content-Type and Authorization.

当您使用 axios 库并传递自定义标头时，您需要将标头构造为键名为“headers”的对象。headers 键应该包含一个对象，这里是 Content-Type 和 Authorization。

Below example is working fine.

下面的例子工作正常。

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

回答by Dach0

Or, if you are using some property from vuejs prototype that can't be read on creation you can also define headers and write i.e.

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

回答by Dunks184

Json has to be formatted with double quotes

Json 必须用双引号格式化

Like:

喜欢：

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

Not just:

不只是：

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