小编典典

反应-单独脚本中的组件不起作用

reactjs

我正在尝试学习react.js,但被困在“ Hello World”脚本中。

我的index.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://fb.me/react-0.13.3.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx" src="src/helloworld.js"></script>
  </body>
</html>

和src / helloworld.js:

React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

当我把这个代码里面<script>index.html文件,它工作正常,但是当我将其移动到单独的文件中我得到的空白页,并控制台错误:

XMLHttpRequest cannot load file:///home/marcin/Projects/react/src/helloworld.js. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

怎么了


阅读 250

收藏
2020-07-22

共1个答案

小编典典

您收到该错误的原因是:

  1. 您已经index.html从本地文件系统(例如通过双击)加载了,而不是通过Web服务器加载了
  2. JSX转换器是text/jsx脚本的负责人,它是一个javascript组件,它试图获取标记src属性指定的文件script
  3. 只允许Javascript从错误消息中列举的协议中获取外部资源(甚至对于那些具有跨域请求之类的进一步限制的协议);从本地文件系统加载的文件具有file://不在该列表中的协议。

当您将jsx脚本包含在index.html文件中时,它可以正常工作,因为无需任何请求即可检索jsx脚本。

您需要做的是在Web服务器上握手,将hello
world文件放入该服务器的文档根目录,然后从Web服务器(例如,从URL)加载它们http://localhost/index.html

2020-07-22