本地JSON文件的反应获取请求返回index.html而不是JSON文件

问题描述：

我遇到了一些意外的行为，使用react和fetch。它应该是非常简单的。本地JSON文件的反应获取请求返回index.html而不是JSON文件

我的代码如下所示：

import React, { Component } from 'react'; 

class App extends Component { 

    componentDidMount() { 
    fetch('/dict.json') 
    .then(res => res.json()) 
    .then(json => console.log(json)) 
    } 

render() { 
    return (
    <p>Example</p> 
    ); 
    } 
}

和我的文件夹结构看起来像这样

- src 
    |_app.js 
    |_dict.json 
- index.html

当我检查，便请求index.html页面，这使得没有任何意义，我的网络。有谁之前经历过这个吗？

答

生产：如果这个代码将然而，在生产环境中运行，然后fetch是不会在这里工作，除非你有安装一个Web服务器来服务于JSON文件，你可以导入本地JSON文件，而不是：

import dict from './_dict.json';

然后里面你componentDidMount你可以映射在它

let results = dict.map((item, index) => { 
    // ... 
});

本地主机：如果你只是WA nt在本地主机上运行，然后我不明白为什么它不会工作，除非我怀疑是这种情况，您的React应用程序将HTTP请求代理到本地网络服务器（这在Reactjs开发中非常常见），并且本地Web服务器没有设置为您的JSON文件。所以，请检查您的package.json或设置的WebPack这样的事情：

"proxy": "http://localhost:8080"

与配置Web服务器端口上运行，以满足您的JSON响应请求文件了。

好的，没错！所以你不能像这样向本地文件提出请求？我认为这是可能的jQuery的Ajax方法？ –

https://www.slothparadise.com/how-to-use-jquery-to-grab-json-files/ - 即时通讯困惑：-S –

您的目标是使其在生产环境或本地主机上工作？ – linasmnew

本地JSON文件的反应获取请求返回index.html而不是JSON文件

相关推荐