源起

  1.  最近微信小程序项目有个需求，用户可晒评论，支持上传本地图片。<br />使用核心API:
  1. wx.chooseImage({
  2.     count: 9, // 最多可以选择的图片张数，默认9
  3.     sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
  4.     success: function (res) {
  5.         // success
  6.         console.log(res)
  7.     }
  8. })

问题：上传本地图片，生成的图片链接是http://tmp/xxx.png格式的，在浏览器环境没法访问？？故有了此文章！

详细解析

那我们再看下Location字段返回的链接，会发现有个新的http请求：
image.png
至此，所以图片可以在微信开发者工具内访问=.=

  • 临门一脚想了下能不能在普通浏览器查看此图片呢，既然想了那就试试吧：

image.png
咦，竟然不行，这里也看不到307重定向的请求，不过确实挺奇怪的http://tmp/xxx.png格式，不能访问才是对的吧。

image.png

image.png
嗯，很棒棒哦，通过127.0.0.1:26897/tmp/xxx.png是可访问到该图片资源的。

HTTP状态码307

301

301: 永久重定向(Mova Permanently)。

  • 当前的URL不再使用了，永远都重定向到新的URL；
  • 搜索引擎以及其他爬虫识别到该状态码时，会更新旧 URL 的资源。

概念有点抽象，这里补充一个网上看到的🌰：访问该旧网址时,会自动重定向到新地址，下图为看到的Network情况:
image.png

302

302: 临时重定向

  • 请求的资源无法从其标准地址访问, 却可通过另外的地址进行访问.
  • GET请求不会发生变化, 其他方法有可能会变成GET请求(若client向server发送post请求, server返回url和302,若用户确认则发送post请求, 但实际很多浏览器直接变成了get请求)

概念有点抽象，这里补充一个网上看到的🌰：访问百度(http协议)时会重定向到百度(https), 下图为看到的Network情况:
image.png
But当你第二次访问的时候却返回了307(Internal Redirect)，这是什么原因呢？
第二次请求的时候注意有个响应头： Non-Authoritative-Reason: HSTS(这是HTTP 的严格传输安全 (HSTS))。 看第二次请求的网络截图：
image.png
需要注意的是该响应头不是不是服务器端生成的，是CHROME创建的虚拟307响应 -> CHROME本地维护了一份HSTS站点列表知道该域名必须要HTTPS方式请求,于是截获做出307响应。

  1.   那么问题又来了，**浏览器是如何知道这个baidu.com这个域名需要使用严格传输安全 (HSTS) 呢?**<br />这是由于第一次重定向到(或者直接访问)https://www.baidu.com，响应头中有一个特殊的头： Strict-Transport-Security: max-age=172800 告诉浏览器在172800s内直接去使用https访问。不信你看看第一次请求的网络截图：<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/1607809/1654785229419-2fce2a8f-d1e1-4c0b-857e-e428ee97ecb8.png#clientId=u46f51eff-5aa9-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=407&id=ub8f3f324&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1017&originWidth=1909&originalType=binary&ratio=1&rotation=0&showTitle=false&size=190292&status=done&style=none&taskId=udc034a81-bc22-4b2d-b624-49724d50f63&title=&width=763.6)

307

307: 临时重定向(Internal Redirect)。

  • 可确保请求方法和消息主体不发生变化

写在最后

  1.   本文主要是讲解了wx.chooseImage()上传本地图片，获取到的图片是[http://tmp/xxx.png](http://tmp/xxx.png)格式，是不能在微信开发者工具以外的浏览器进行访问的，But可通过[127.0.0.1:26897/tmp/xxx.png]()进行访问。