支付宝小程序请求头携带referer，如果字符过长会导致接口请求不通

前段时间使用uniapp开发三端的时候（微信，h5,支付宝），在某一个特殊的场景下，接口请求不通，刚开始以为是后端的问题，但是下班前后端跟我说，接口没有请求到他那，所以让我排查（我谢谢他，正值那天周五，谁叫我热爱工作呢）

在项目中没有定义referer这个字段

我试着对比h5，微信小程序，支付宝小程序

h5没有这个参数，请求成功

微信小程序 referer很短，接口请求成功

支付宝接口请求失败

referer字段巨长

这是个详情页面，是从列表页带过来的数据，我看其他的列表如果字符不多的情况下，这个接口是可以请求的。

查看源码：

encodeURIComponent 将数据转成了UTF-8，所以携带过去的参数，就会变的巨长

async goDetail(item) {
      item.releaseTime = this.formatDate(item.releaseTime)
      const messageDetail = encodeURIComponent(JSON.stringify(item))
      uni.navigateTo({
        url: `/pagesB/messageCenter/messageDetail?messageDetail=${messageDetail}`,
      })
    },

details页面进行解码

询问大佬得知

所以问题排查到了，就是我们跳转页面携带的参数过长，导致接口请求失败。

解决方案：那就换一种传值呗，这里选择Vuex,

在store/index.js添加mutations方法

跳转事件中将encodeURIComponent换成存储到vuex中

details.vue中 获取 vuex

改完之后看refererd的字符少了，接口请求成功。

而且也看了其他两端没啥问题，交卷。

总结：虽然这个问题不是很大哈，从后端反馈问题到解决问题花了不到1小时的时间，但是这种很细节的东西日常开发中确实会遗漏。

今天2023年12月31号，写下本篇博客，明天2024年1月1号，我会再写一篇，去年没有意识到，今年得抓住，这叫有始有终。希望没有看过这篇博客的人，不要被bug所烦恼，而看过这篇博客的人，希望能解决你们的问题。

See You ~