React项目中，fetch()请求本地json文件报404

#1

详情如图？不明白问题出在哪里？求解？

#2

确定那个404的url是正确的？

#3

data.json 文件位置和App.js在同一个文件夹内

#4

http://localhost:8888/data.json能访问到文件？

#5

访问不到… 显示的是“Cannot GET /data.json”

#6

本地开发服务器用的是什么？？？

#7

显然这个路径是错的，把你文件目录发出来看看

#8

是webpack的服务器：webpack-dev-server

#9

自己做练习的一个小demo

#10

data.json放在index.html的同级目录才对

#11

之前就是和index.html一个目录的，报404，才换到App9.js的同级目录。。。。搞不定了！

#12

我之前也遇过这样的问题，不过我跟你的做法不一样，前端开发我使用的是webpack-dev-server,在webpack.config.js中我配置了

devServer:{
    proxy: {
        "/api": "http://localhost:3000"
    }
}

同时，我在后端使用的node.js，框架是express v4,

var express = require("express");
var app = express();
app.get("/api/data", function(request, response){
    var data = require('./data.json');
    response.send(data);
})
app.listen(3000);

这样，当我在前端请求/api/data时，express就会把data.json推给我

#13

因为开发单页面应用，设置了

devServer:{
    historyApiFallback: true
}

当请求找不到资源的时候，就会返回默认的index.html，这就是你报第二个错的原因

#14

我刚刚试了一下，你需要把你data.json移到output.path目录下，这样就可以解决了。

#15

我用的React，用的fetch请求的数据。。直接把.json地址作为url传给fetch，报了404么

#16

date.json 的位置不对，应该与inde.html同一个目录

#17

之前是放一个目录的，一样的404才移出去的，也没用

#18 
module.exports = {
    output:{
        path: your path//把data.json放到这个路径下
    }
}
#19

我用了下面三种方式都失败了，还是获取不到json数据。你的问题后来解决了吗？
方法一：
var data = require(’./data.json’);

方法二：
// import data from ‘./data.json’;

方法三（这个方法的json文件和app.js同一个目录，没有404报错）
// var data = [];
// console.log(“inside handleGetJson”);
// fetch(./data.json, {
// headers: {
// ‘Content-Type’: ‘application/json’,
// ‘Accept’: ‘application/json’
// }

// })
// .then((response) => response.json())
// .then((messages) => { console.log(messages); });
for (var i=0,l=data.length;i<l;i++){
console.log(data[i]);
}

测试：
console.log(“data type:”+typeof(data));
console.log(‘data:’, data);

#20

解决了！具体方法，晚点我发出来