gpt4 book ai didi

javascript - 本地json文件未在react js中使用ajax加载

转载 作者:行者123 更新时间:2023-11-28 06:39:52 25 4
gpt4 key购买 nike

我有以下 react 组件。

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 文件“data.json”时,它显示未找到错误。我还需要传递其他参数吗?我的本地 json 文件与 GraphView 位于同一文件夹中。

最佳答案

出于安全考虑,大多数浏览器都关闭从文件系统加载 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。

关于javascript - 本地json文件未在react js中使用ajax加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33951964/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com