小程序关于请求接口302重定向处理方法

业务场景描述后端提供了一个接口，正常post请求，但是此接口返回结果是 302 ，页面自动重定向到结果页面。如下图所示，我们请求到这个 302 接口之后其实是希望直接打开下面那条 200 请求的 index.html 页面。下图是在浏览器中测试的 ajax 请求，那么此时我们需要在小程序中实现请求接口直接打开页面的功能。预期目标第一次尝试（失败）我们知道的是，小程序中只能使用人家提供的 API

李小斌96

14894人浏览 · 2020-11-27 17:00:43

李小斌96 · 2020-11-27 17:00:43 发布

业务场景描述

后端提供了一个接口，正常post请求，但是此接口返回结果是 302 ，页面自动重定向到结果页面。
如下图所示，我们请求到这个 302 接口之后其实是希望直接打开下面那条 200 请求的 index.html 页面。
下图是在浏览器中测试的 ajax 请求，那么此时我们需要在小程序中实现请求接口直接打开页面的功能。
在这里插入图片描述

预期目标

在这里插入图片描述

第一次尝试（失败）

我们知道的是，小程序中只能使用人家提供的 API ，不能自己写，所有的封装和变换都是在 wx.request 这个 API 的基础上，底层是不能变的。

所以要发起请求我们只能使用 wx.request ，看代码：

const data = {
      pf: '2',
      appId: 'mgszwfwlzt',
      sign: this.data.sign,
      taskId: this.data.qlsxBasicInfo.TaskCode,
      timestamp: this.data.timeStamp,
    }
    wx.request({
      url: 'https://*********/bjpjList.do',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data,
      method: 'POST',
      success: function(response) {
        console.log(response)
      }
    })

按照我们平时请求接口的写法，我们请求一下这个 bjpjList.do 的接口，看下 network 监听到了什么：

在这里插入图片描述

在小程序中我们其实也监听到了 bjpjList.do 的请求，但是一闪而过，立马变成了 index.html 的请求，返回结果也直接是我们 index.html 的代码

在这里插入图片描述

百度了很多说可以在 response.header 里面获取到 location，也就是 302 重定向 index.html 的地址，我们展开 response 看看到底有没有

在这里插入图片描述
可以看出，小程序人家直接帮我们请求重定向之后的页面了，没给我们权利去监听这个重定向的地址，感觉没戏了，可以页面地址看得到拿不到，那我不信，打开官网看看官网提供的 API

在这里插入图片描述
发现还有别的 API 我们打开看看 onHeadersReceived

这个 API 官网的解释是监听 HTTP Rresponse Header 事件

这不就是我们要的么，监听我们发起 HTTP 请求的头部，去读取重定向之后的地址

我们接着写，代码如下：

const data = {
      pf: '2',
      appId: 'mgszwfwlzt',
      sign: this.data.sign,
      taskId: this.data.qlsxBasicInfo.TaskCode,
      timestamp: this.data.timeStamp,
    }
    wx.request({
      url: 'https://********/bjpjList.do',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      data,
      method: 'POST',
      success: function(response) {
        console.log(response)
      }
    }).onHeadersReceived(res => {
      if (res.header.location) {
        wx.hideLoading()
        this.setData({
          pageLink: res.header.location
        })
      }
    })