传递带有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时，为了传递自定义标头，需要提供一个对象，其中包含标头作为最后一个参数

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

2017-06-18 17:48:52

其他回答

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

2017-06-18 17:48:52

要在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的完整示例。使用自定义报头发布请求

2018-01-27 19:23:50

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

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

2020-10-02 14:54:28

拦截器

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

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

推荐文章

标签

最新文章