vue SSR asyncData并发post提交设置Content-Type方法

最近接触到的vue项目,需要使用 SSR asyncData,遇到了一个问题需要使用并发,同时进行多个post请求。
await Promise.all可以实现并发请求,如果是get提交、或者post无参数提交不会遇到问题。

但是使用post提交,并且有参数,就会报415错误。
后端报错信息如下:
HttpMediaTypeNotSupportedException: Content type ‘application/x-www-form-urlencoded;charset=UTF-8’ not supported
在这里插入图片描述

需要设置$axios的post请求头, ‘Content-Type’: ‘application/json’,下面是我使用的一种方式。

主要是这一段:

$axios({
        url: '/v4/article/ks/list',
        method: 'post',
        data: {pageNo: 1,
          pageSize: 20,
          orderBy: null,
          orderDir: null,
          searchMap: {
            catId: route.query.catId ? route.query.catId : 33,
            typeCodes: route.query.articleCats ? route.query.articleCats : ''
          }},
        headers: {
          'Content-Type': 'application/json'
        }
      })

完整代码如下:

  async asyncData ({ $axios, route }) {
    let [request1Data, request2Data] = await Promise.all([
      $axios({
        url: '/v4/article/ks/list',
        method: 'post',
        data: {pageNo: 1,
          pageSize: 20,
          orderBy: null,
          orderDir: null,
          searchMap: {
            catId: route.query.catId ? route.query.catId : 33,
            typeCodes: route.query.articleCats ? route.query.articleCats : ''
          }},
        headers: {
          'Content-Type': 'application/json'
        }
      }),
      $axios({
        url: '/v4/article/getFirstType',
        method: 'post',
        data: {},
        headers: {
          'Content-Type': 'application/json'
        }
      })
    ])
  
    return {
      articleList: request1Data.data.data.list,
      articleCount: request1Data.data.data.count,
      isShowCatId: route.query.catId ? route.query.catId : 33,
      articleTypeList: request2Data.data.data,
    }
  }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值