fetch http请求被转成https？

最新推荐文章于 2024-09-13 23:26:18 发布

原创最新推荐文章于 2024-09-13 23:26:18 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#fetch #js

博客探讨了fetch API请求http资源时被自动转换为https的问题，通过排除法确定并非fetch API被修改或浏览器bug导致，最终发现在HTML中特定的meta标签（Upgrade-Insecure-Requests）是问题源头。此首部指示浏览器优先选择加密响应，影响了fetch行为。同时，文章提到fetch API目前无法直接获取上传进度。

部署运行你感兴趣的模型镜像

fetch http请求被转成https，以及fetch问题相关记录

- http自动被转成https
- 上传进度的获取

http自动被转成https

请仔细看下图

我们可以很简单的发现，我用的是原生api，然后请求一个http协议的，为什么报错提示的却是GET https:// why？按理来说，这个报错应该为http:// xxxx
基于上面的问题，我们可以推测，这个fetch和标准的fetch有差异。
然后我们很显然会去思考这个差异是哪里的来的？我们可以做以下猜测

最容易改浏览器fetch api的方式就是window.fetch = xxx…，可能是做了类似操作引起了上面的问题。
浏览器出bug了
有其他东西影响了，原生的fetch api让他表现出差异

然后我们可以先开始验证前两条猜测的正确性

1.我们可以很简单发现第一条显然不成立

在这里插入图片描述
如果我们修改了原生fetch api，我们打印fetch的值得时候，就会显示我们修改之后的值。所以问题不是因为修改了fetch api 引起的。

第二条也很好验证，在这里就不验证了。这个可能性比较小

那么我们可以得到肯定有其他什么东西影响了fetch api

怀着疑惑，我们看了一眼html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  <meta name="theme-color" content="#000000">
  <title></title>
</head>

<body>
  <div id="root"></div>
</body>
</html>