5

我正在学习 ReactJS 并尝试在https://raw.githubusercontent.com/kirupa/kirupa/master/reactjs/helloworld_batman.htm上运行代码(这是来自https://www.kirupa.com/的说明反应/building_your_first_react_app.htm)。

使用 Chrome,永远不会显示“蝙蝠侠”,并且 Chrome 开发人员工具会记录以下错误:

在“ https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js ”访问脚本(重定向自“ https://unpkg.com/react-dom@16/umd /react-dom.development.js ') from origin 'null' 已被 CORS 策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。

在此处输入图像描述

果然,当直接请求 react-dom.development.js 时,Network 选项卡显示缺少标头。

其他注意事项:

我究竟做错了什么?

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>React! React! React!</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

  <style>
    #container {
      padding: 50px;
      background-color: #EEE;
    }
    #container h1 {
      font-size: 144px;
      font-family: sans-serif;
      color: #0080a8;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script type="text/babel">
    var destination = document.querySelector("#container");
    ReactDOM.render(React.createElement(
      "h1",
      null,
      "Batman"
    ), destination);
  </script>
</body>

</html>

4

1 回答 1

6

事实证明,如果我取出“crossorigin”,那么它可以在 Chrome 中使用!

With <script crossorigin='anonymous'>对此进行了讨论,为什么脚本“被 CORS 策略阻止”?

于 2019-01-29T15:17:52.930 回答