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

业务场景描述

后端提供了一个接口，正常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
        })
      }
    })

我们发现开发工具上还是 重定向之后的头部信息，不满足情况

可以鉴于有时候真机测试和开发工具的测试结果是不一样的，我们使用真机测试一下（我使用的安卓手机）

可以看到开发工具上没有直接跳转，而且监听到了两次 onHeadersReceived 事件：

图中可知 第一次监听事件其实获取到了 这个 location 地址，那我们就写了上面的代码，直接使用 webview 标签跳转就好了

安卓手机全部Ok没问题，上体验版之后，苹果手机一律打不开，每次苹果手机都作妖都习惯了，我们换个苹果在测试一下

使用 iphone 6s Plus 测试，发现我们的 onHeadersReceived 事件和我们开发工具上的情况是一样的，只能监听到一次，还是获取不到 location 地址

我们想投机取巧的方式失败

PS：至于百度说把请求方式换成 HEAD 这样的方式，如果你后端只支持 POST 请求方式，请求都不会成功，或者你和后台能商量修改当然最好。这里我们没得权限修改后端，继续自己想办法！

第二次尝试（成功）

这里其实你会发现小程序里面的 API 已经没有什么可用的了，那我们只能想别的办法。

这种方式是使用跳转 H5 的方式，用浏览器去处理 302 请求自动跳转

由上图中看出，我们已经将请求接口的功能交给了 h5 的空白页面，提交请求后，直接跳转结果页面，这是浏览器默认的

也就是说小程序对 302 重定向的方式 无能为力

因为页面默认是 form 表单提交，提交成功后默认跳转，看一下大致代码

我们读取到 小程序传入 H5 页面的参数并将字符串转换成对象形式

然后使用了关键的 form.submit() 提交表单

PS：如果不使用 form.submit() 方式，使用 ajax 请求还是不能自动跳转

把 h5 页面放到服务器上，带出网络地址

然后把小程序中的跳转地址修改

如图所示，记得加入 业务域名

到这里问题就完美解决了，这里是我们的页面加载很慢的问题，不是代码问题，不用担心

如果大家有更好的方式也可以直接私信我！感谢！