axios设置请求头实现post请求发送数据的格式(Form Data)

common.js:

common函数传递的参数添加 contentType: 'application/x-www-form-urlencoded' 即可改变post请求参数传递的格式

import axios from 'axios'
import qs from 'qs'

const service = axios.create()


export const common = async (config) => {
  if (config.contentType === 'application/x-www-form-urlencoded') {
    config.headers = { 'content-type': 'application/x-www-form-urlencoded' }
    config.data = qs.stringify(config.data)
  }
  let res = await service(config)
  return res
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 在Vue中使用axios发送post请求时,可以在请求配置对象中设置headers属性,以添加请求头,代码示例如下: ``` axios.post('/api/data', { data: 'test' }, { headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) ``` ### 回答2: Axios是一个流行的JavaScript库,用于将客户端与服务器之间进行HTTP请求和响应交互。它提供了许多功能,包括拦截器、请求和响应拦截等。在Vue中,我们可以使用Axios发起HTTP请求来获取或提交数据。 其中,在vue中使用Axios的时候,post请求需要设置请求头。具体方法如下: 1. 在Vue组件中导入Axios模块。 ``` import axios from 'axios' ``` 2. 配置Axios的默认配置。 ``` axios.defaults.baseURL = 'http://localhost:3000' axios.defaults.headers.common['Authorization'] = AUTH_TOKEN ``` 3. 在发送POST请求设置请求头。 ``` axios.post('/user', data, { headers: { 'Content-Type': 'application/json' } }) ``` 在示例代码中,我们可以看到传递给Axios的第三个参数是一个配置对象。在这里,我们将headers属性设置为一个包含一个Content-Type头的对象。 这是非常重要的,因为Content-Type头指定了服务器应该如何解析请求体。 在这种情况下,我们将Content-Type设置为application/json,我们可以确保服务器将请求体作为JSON对象解析,然后将其提供给我们的请求处理器。 当然,在实际的开发中,我们可能需要设置更多的请求头信息。因此,我们需要根据实际情况进行不同的设置。 总结:设置Vue中Axios请求头的方法包含三个步骤:导入Axios模块,配置Axios默认配置,发送POST请求设置请求头。需要根据实际情况进行设置。 ### 回答3: 在使用Vue.js开发中,我们经常会用到axios库来发送http请求,其中post请求是常用且必不可少的一种请求方式。在进行post请求时,我们需要设置请求头参数,来告诉服务器请求的类型和参数等信息。那么,如何在Vue中设置post请求头呢? 以下是一些简单的步骤: 第一步:引入axios库 我们需要在需要使用axios的Vue组件中引入axios库,以便发送http请求。 第二步:设置请求头 当我们发送post请求时,需要设置请求头。可以通过axios.defaults.headers.post属性来设置post请求头,如下所示: ```javascript import axios from 'axios' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; ``` 以上代码将设置post请求头Content-Type为application/x-www-form-urlencoded;charset=UTF-8。 第三步:发送post请求 在完成上述设置后,我们可以使用axios发送post请求。在指定请求参数时,需要使用axios.post()方法。 在发送post请求时,有两种常用的方法:使用FormData或使用json格式数据。我们需要根据自己的需求来决定使用哪种方法。 如果使用json格式数据,可通过以下方式发送post请求: ```javascript axios.post('/api/test', { username: 'test', password: 'test123' }).then(res => { console.log(res.data) }).catch(err => { console.log(err) }) ``` 以上代码使用axios.post()方法发送post请求,并指定了请求参数为json格式的数据。请求的路径为/api/test,参数为{ username: 'test', password: 'test123' }。请求成功后将返回响应数据,并输出到控制台中。 总结: 在Vue中使用axios发送post请求,需要对请求头进行设置。通过axios.defaults.headers.post属性可以设置post请求头。同时,根据自己的需求,选择json格式数据或FormData,在发送post请求时指定请求参数,并使用axios.post()方法发送请求即可。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

徐同保

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值