create-react-app Static 站點 - 讀取 JSON 文件

Question

我會先說我是 React 的新手，所以希望有一個我剛剛錯過的簡單答案。

簡而言之，我想構建一個無需任何網絡服務器即可運行的頁面。 我已經配置好了所有東西，所以我可以打開 index.html 並且運行良好。

但是，問題是我想要一個 data.json 文件，該文件可以在項目構建后進行編輯（本質上是一個配置文件），所以我不能將它粘貼在 /src 文件夾中，因為它都被捆綁了。

數據.json

{
  "timeout": 10,
  "threshold": 50
}

從“反應”導入反應；

const App = () => {      
  const path = process.env.PUBLIC_URL + '/data/data.json';
  fetch(path)
  .then((res) => res.text())
  .then((json) => {
    const data = JSON.parse(json);
  })

  return (
   ...
  );
}

這在 VSCode 中運行時可能工作正常，但在單獨運行 index.html 頁面時會引發 CORS 錯誤。 我也知道我不能直接在 /public 中引用 a 文件，因為它位於 /src 文件夾之外：

import data from '../Public/data/data.json';

如何在 /Build 中有一個可以從 React 讀取的可配置文件，而不會遇到 CORS 問題。

希望這個問題有意義

謝謝

Answer 1

無需預先添加 PUBLIC_URL 環境變量。

這應該工作

fetch('/data/data.json')

Answer 2

我能夠通過將配置注入 index.html 文件中的 window object 來解決這個問題。 它非常 hacky，但它允許我在項目構建后編輯 index.html 文件和配置。 我很想聽聽一些更好的解決方案。

索引.html

<script>
  window.__data = {
    "timeout": 10,
    "threshold": 50
  }
</script>

應用程序.tsx

const App = () => {      
  const data = (window as any).__data;

  return (
   ...
  );
}