無法通過 ERR_CERT_COMMON_NAME_INVALID 在 CodeSandbox.io 上獲取 API？

Question

我可以使用npm start在http://localhost:3001上將其作為本地應用程序運行，但如果它用於CodeSandbox或 Stack Overflow 片段，則獲取失敗。 如果我使用其他 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 上，協議是https 。 HTTPS 頁面只能向其他 HTTPS 端點發出請求。 由於您使用的 worldclockapi 上的端點位於 HTTP 上，因此瀏覽器不會嘗試通過 HTTP 進行連接。

如果服務器支持它，它可能會嘗試升級到 HTTPS，但在這種情況下，它不支持； worldclockapi 根本不支持 HTTPS。

相反，如果您在本地文件上運行代碼，則該本地文件不會通過 HTTPS 加載，因此該限制不適用； 允許對 HTTP 端點的請求。

最好的解決方案是找到一個支持 HTTPS 的時間 API； worldclockapi 目前似乎不是一個好的選擇，至少在他們升級或修復他們的 SSL 配置之前不是一個好的選擇。 您還可以將托管此 React 應用程序的服務器降級為 HTTP，但這是一個非常糟糕的方法。