代码之家  ›  专栏  ›  技术社区  ›  geeksal

ReactJS:JSON文件是从本地主机而不是项目目录中获取的

  •  0
  • geeksal  · 技术社区  · 9 年前

    enter image description here

    我有以下代码在我的 index.js 用于加载的文件 website.json

    componentDidMount() {
        $.ajax({
           url: "../website.json",
           type: "GET",
           dataType: 'json',
           ContentType: 'application/json',
           success: function(data) {         
             this.setState({data: data});
             console.log(data);
           }.bind(this),
           error: function(jqXHR) {
             console.log(jqXHR);
           }.bind(this)
        })
      }
    

    npm start 命令从我的应用程序的本地目录为我的react应用程序提供服务器。这为我的应用服务 http://localhost:3000/ 文件来自 http://localhost:3000/website.json 这给了一个 404 not found 错误

    所以,我的问题是 网站json

    更新: 我特别想问的是,为什么ajax调用无法从我的项目文件夹中加载数据(我使用的是相对寻址),而是包括来自本地主机的路径。我想使用ajax调用加载数据,这是否可行。

    3 回复  |  直到 9 年前
        1
  •  2
  •   Alcinator    9 年前

    您的Web服务器(我猜Express)将提供“public”文件夹中的文件。

    出于安全原因,web服务器不允许访问目录根以外的文件(在您的情况下为/public),因此您将无法通过ajax(或从浏览器)获取文件。

    • 将文件复制/移动到公用文件夹中
    • 创建指向公用文件夹中文件的符号链接
        2
  •  2
  •   Oleg Imanilov    9 年前

    您可以将其作为

    var website = require('../website.json');
    

    另一种方法-移动 website.json ajax('/website.json'...

        3
  •  0
  •   Dan Mason    9 年前

    我猜你在用 ES6 / ES2015 react . 因此,与其在 componentDidMount 您只需在顶部添加以下内容:

    import websiteData from '../website.json';
    

    然后你就可以使用 websiteData 作为组件中的变量。