React项目 fetch 本地json文件 报错404问题_fetch for responded with 404:

一年没有碰React了，有点生疏了，于是自己手动搭建了一个Ract脚手架方便做练习，我使用的是redux进行状态管理
在actions的userInfo.js(功能页面，名字自己定义)中新建如下请求函数：

export function getUserInfo(){ 
  return function(dispatch){
    dispatch(getUserInfoRequest())
    return fetch('/api/user.json')   //关键请求
    .then((response)=>{
      return response.json()
    })
    .then((json)=>{
      dispatch(getUserInfoSuccess(json))
    })
    .catch(()=>{
      dispatch(getUserInfoFail())
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

json文件夹路径如下：

当前项目根路径下建api文件夹，内建user.json
1

触发请求后报错：

userInfo.js:33 GET http://localhost:8080/api/user.json 404 (Not Found)
1

寻找原因
肯定还是路径问题，那么就和webpack的配置相关，Webpack 中的 devServer 配置项就是引起这一切问题的原因，它的功能大概是这样:
在开发环境下，DevServer 提供虚拟服务器，让我们进行开发和调试；
提供实时重新加载。与Webpack-DevServer contentBase 这个属性有关系
webpack里面关于path、publicPath和contentBase的区别及用法。
1. output里面的path表示的是output目录对应的一个绝对路径。
2. output里面的publicPath表示的是打包生成的index.html文件里面引用资源的前缀
3. devServer里面的publicPath表示的是打包生成的静态文件所在的位置（若是devServer里面的publicPath没有设置，则会认为是
output里面设置的publicPath的值）
4. devServer里面的contentBase表示的是告诉服务器从哪里提供内容。（只有想提供静态文件时才需要）

解决办法如下：

webpack.config.js中添加如下代码：
注：：在新版的webpack-dev-server中，contentBase已经被移除了，用static替代，如下：
module.exports = {
  devServer: {
    static: path.join(__dirname,'/')//按照我目前的项目目录结构是这样
  }
}
1
2
3
4
5
6
7

重新发送请求发现问题完美解决！！！