本地json文件未使用ajax在反應js中加載

我有以下反應組件。本地json文件未使用ajax在反應js中加載

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相同的文件夾中。

來源

2015-11-27 Dhanya

你可能正在編譯它到另一個文件夾中的其他文件？ –

從大多數瀏覽器中的文件系統加載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，然後打開本地主機：8888。

來源

2016-01-11 18:22:45 arve0

本地json文件未使用ajax在反應js中加載

回答

相關問題