微信小程序image请求url携带请求头

161 阅读1分钟

为什么要携带请求头

先来看看简单的image标签请求图片资源,只要知道图片地址那么任何人都是可以访问的

  <image src="https://*****" />

因为在实际开发中,我们的图片可以是放在静态服务器上的,但是又不希望所有人都可以访问得到这些图片,我们可能会在静态服务器上设置请求头来进行鉴权,比如携带请求头的Bearer Token

如何携带请求头

要使用到微信官方的一个接口wx.downloadFile,这个接口接受url参数,并将临时路径赋值给 image 标签,以下是具体的代码:

 wx.request({
  url: 'https://example.com/image', // 图片地址
  header: {
    'Authorization': 'Bearer token' // 添加请求头
  },
  success(res) {
    wx.downloadFile({
      url: res.data.url,
      success(downloadRes) {
        if (downloadRes.statusCode === 200) {
          // 将临时路径赋值给 image 标签
          that.setData({
            imageUrl: downloadRes.tempFilePath
          });
        }
      }
    });
  }
});

先通过我们的服务器请求,然后通过wx.downloadFile生成临时路径,然后保存这个临时路径,最后赋值在相应image标签的src属性上