使用 axios POST 请求传递标头

Posted

技术标签:

【中文标题】使用 axios POST 请求传递标头【英文标题】:Passing headers with axios POST request 【发布时间】:2017-11-20 22:01:55 【问题描述】:

我已经按照 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 调用时,我遵循 this link 并不能完全让它工作。

我经常收到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)
)

【问题讨论】:

【参考方案1】:

使用 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 是内部服务器错误,您能否在服务器端检查是否有标头出现或是否有其他错误 @KishoreJethava,你能在你的服务器中记录标题,看看你是否得到了正确的值 您不需要发布任何数据吗?还要确保 this.state.token 包含一个值 让我们continue this discussion in chat。 @ShubhamKhatri,我可以请您在这里查看axios 相关问题:***.com/questions/59470085/… 吗?【参考方案2】:

这是一个带有自定义标头的 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 格式出现。这并不能解决问题。 为此您需要添加headers: 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "*", "Accept": "application/json" 请注意,这仅在您的api支持json响应时才有效【参考方案3】:

Shubham 的answer 对我不起作用。

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

下面的例子运行良好。

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

【讨论】:

【参考方案4】:

如果您使用 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");
    );
;

【讨论】:

【参考方案5】:

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 的 catch 块捕获。

另外,Axios 中的 post 方法的 header 是可选的

【讨论】:

【参考方案6】:

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

它可以为您节省大量代码

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() 不幸的是,我的较低【参考方案7】:

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

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

【讨论】:

【参考方案8】:

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

【讨论】:

【参考方案9】:

拦截器

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

【讨论】:

【参考方案10】:

axios.post可以接受3个参数,最后一个参数可以接受一个config可以设置header的对象。

您的问题的示例代码:

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

【讨论】:

以上是关于使用 axios POST 请求传递标头的主要内容,如果未能解决你的问题,请参考以下文章

如何在需要标头的axios发布请求中具有配置参数

在 react-native 中发送请求标头/授权 axios.post

使用axios请求数据,post请求出错。因为axios传递的请求参数是json格式,而后端接口要求是formData

无法使用 axios 向 Flask 应用程序发送 POST 请求

Axios:如何手动附加 X-XSRF-TOKEN 标头?

如何在我的 axios 发布请求中正确添加标头,发布路由在邮递员中有效,但在使用 axios 时无效