Question

我的HTML文件中包含以下内容：

<script type="text/babel">

    var App = React.createClass({
        render: function() {
            $.ajax({
              url: 'data.xml',
              dataType: 'xml',
              cache: false,
              success: function(data) {
                data = xmlToJson(data);
                console.log(data);
              }.bind(this)
            });
            return (<p>data</p>);
        }
    }); 


    ReactDOM.render(
      <App />,
      document.getElementById('app')
    );
</script>

但是控制台抛出以下错误：

XMLHttpRequest cannot load file:///C:/Users/alessandro.santese/Documents/Documents/Documents/Alessandro-UI/PROJECTS/Firefly/task_2/data.xml?_=1468834003361. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

我该如何解决这个问题？

Answer 1

您正在尝试发出跨域请求，您应该在本地运行http服务器，然后请求您的data.xml文件

npm install -g http-server

Answer 2

问题是ajax请求需要服务器从中获取文件，他们无法从localStorage中获取文件。只需在服务器上运行您的应用程序。您可以将任何服务器用于此目的示例tomcat或http-server。

如果您在linux或max-os或安装了python的操作系统，您可以转到项目目录并使用

从那里运行服务器

python –m SimpleHTTPServer 8080

或者您也可以使用nodejs http-server。使用命令npm install -g http-server安装它并从项目目录http-server ./

运行它

我希望这个解决方案可以帮助你。

反应从XML文件中获取数据

2 个答案: