fetch出问题了？ | 易学教程

出什么问题了？

请仔细看下图

我们可以很简单的发现，我用的是原生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>

在一大段代码中发现了一个很特殊的meta标签
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"

我们可以尝试注释一下，发现原来的问题没有了，终于找到罪魁祸首了。

然后我们就可以找到这是为什么了，具体原因请戳链接

thanks

来源：CSDN

作者：wangweiren_get

链接：https://blog.csdn.net/wangweiren_get/article/details/103591330

标签

fetch

api