今天在搞專案的時候，想要在React專案中fetch本地的json檔案卻一直報404。

  網上的解決方案，差不多說地址都是相對於首頁index.html而言，所以將json資料放在相對index.html上就好了。

  可是鼓搗了個把小時還是沒有解決問題。據我觀察，網上的解決方案都是基於 create-react-app 的專案，而我的專案是自己整合的環境。

  為了驗證網上的解決方案的可行性，不多說新建一個 create-react-app 構建的demo開擼~

####create-react-app 專案
在 APP.js 中 加入 fetch 的函式，比如就放在 componentWillMount

  componentWillMount = () => {
    fetch("./data.json")
     .then(res => res.json())
     .then(json => console.log(json))
  }

然後，在 public 資料夾下，新建一個 data.json 檔案看看能不能取到資料。

{
  "test1": 1,
  "test2": 2,
  "test3": 3
}

重新整理下頁面，發現很輕鬆地就取到了資料，證明網上的解決方案都靠譜，不過都是基於 create-react-app 這個腳手架構建的專案是這樣引的。

檔案路徑是這樣的：

####尋找原因
為什麼我自己整合的環境會遇到BUG呢？好吧，直接忽略找的過程（雖然確實鼓搗了好久，還把專案移植到了 create-react-app 環境下)，Webpack 中的 devServer 配置項就是引起這一切問題的原因，它的功能大概是這樣:

• 在開發環境下，DevServer 提供虛擬伺服器，讓我們進行開發和除錯；
• 提供實時重新載入。簡直美滋滋。大大減少開發時間。

然而罪魁禍首是 contentBase 這個屬性。（有興趣的可以去了解，我這裡給出BUG解決方案）

####解決方案
在 webpack.config.js 中（或者是 webpack.dev.config.js

const path = require("path")
module.exports = {
    //其他配置不寫了
    ...,
    devServer: {
        contentBase: path.join(__dirname, 'public')
    }
}

然後再新建 public 資料夾，在把 json 檔案和 index.html（因為它也是靜態檔案）都丟進去，最後終於拿到了我想要的資料~

####再看 create-react-app
  那麼 create-react-app 肯定也在哪裡設定了 contentBase 這個屬性。

  在 package.json 中，我們發現在 create-react-app 構建的專案 npm start，跑的是 react-scripts start，在 node_modules 資料夾中找到 react-scripts 資料夾，在裡面搜尋 contentBase 屬性，果然我們在 react-scripts/config/webpackDevServer.config.js 檔案中找到了

contentBase: paths.appPublic

  paths.appPublic 是在別處的封裝，但我們可以知道就是這條配置起的作用。

  那麼，之前網上找的答案給出的結論也是片面的，檔案不是關於 index.html 的相對位置，是對於 public 資料夾的相對位置，並且只能讀取 public 資料夾中的靜態檔案，所以對於 public 的同級上級是取不到的，就把靜態檔案放到 public 資料夾中吧，這也是一個很好的編碼規範。