React项目 fetch 本地json文件 报错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())
    })
  }
}

json文件夹路径如下:

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

触发请求后报错:

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

寻找原因
肯定还是路径问题,那么就和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,'/')//按照我目前的项目目录结构是这样
  }
}

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值