javascript - 无法使用 ERR_CERT_COMMON_NAME_INVALID 在 CodeSandbox.io 上获取 API？

Question

我能够在 http://localhost:3001 上将其作为本地应用程序运行使用 npm start , 但如果它用于 CodeSandbox或堆栈溢出片段，获取失败。如果我使用其他 API http://worldtimeapi.org/api/timezone/America/Los_Angeles 也一样
错误:

GET https://worldclockapi.com/api/json/pst/now
net::ERR_CERT_COMMON_NAME_INVALID

似乎这可能是由于 https 上的网页和使用 http 从 API 获取数据。
此处作为实时堆栈片段的示例:

function App() {
  const [data, setData] = React.useState({});

  React.useEffect(() => {
    fetch("http://worldclockapi.com/api/json/pst/now")
      .then(res => res.json())
      .then(dataFetched => {
        setData(dataFetched);
      });
  }, []);

  return (
    <div className="App">
      <pre className="data">
        {data.currentDateTime}
      </pre> 
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

有人知道为什么以及如何使其工作吗？

Answer 1

这看起来是 HTTPS 安全性的结果。
在 Codesandbox 和 Stack Snippets 上，协议(protocol)是 https . HTTPS 页面只能向其他 HTTPS 端点发出请求。由于您使用的 worldclockapi 上的端点位于 HTTP 上，因此浏览器不会尝试通过 HTTP 连接。
如果服务器支持它，它可能会尝试升级到 HTTPS，但在这种情况下，它不支持； worldclockapi 根本不支持 HTTPS。

相反，如果您在本地文件上运行代码，则该本地文件不会通过 HTTPS 加载，因此该限制不适用；允许对 HTTP 端点的请求。
最好的解决方案是找到支持 HTTPS 的时间 API； worldclockapi 目前似乎不是一个好的选择，至少在他们升级或修复其 SSL 配置之前不会。您还可以将托管此 React 应用程序的服务器降级为 HTTP，但这是一种非常糟糕的方法。