详情如图?不明白问题出在哪里?求解?
React项目中,fetch()请求本地json文件报404
我之前也遇过这样的问题,不过我跟你的做法不一样,前端开发我使用的是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推给我
因为开发单页面应用,设置了
devServer:{
historyApiFallback: true
}
当请求找不到资源的时候,就会返回默认的index.html,这就是你报第二个错的原因
我用了下面三种方式都失败了,还是获取不到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);