我正在尝试运行一个使用 ReactJS 库的页面。我收到以下错误:

Redirect at origin 'https://fb.me' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:55042' is therefore not allowed access.

My code looks like this:

<html>

<head>
  <title> Javascript Simple Quiz </title>
  <script type="text/jsx" src="https://unpkg.com/react@0.14.7/dist/react.js" integrity="sha384-xQae1pUPdAKUe0u0KUTNt09zzdwheX4VSUsV8vatqM+t6X7rta01qOzessL808ox" crossorigin="anonymous"></script>
  <script type="text/jsx" src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js" integrity="sha384-A1t0GCrR06cTHvMjaxeSE8XOiz6j7NvWdmxhN/9z748wEvJTVk13Rr8gMzTUnd8G" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
</head>

<body>
  <script type="text/babel">
    var helloWorld = React.createClass({ render: function() { return
    <div>
      <h1>Hello KEN</h1>
      <p>This is me spittin</p>
    </div>
    } }); React.render(
    <helloWorld />),document.body);
  </script>
</body>

</html>

我故意去掉了 DOCTYPE 标签,这不是问题的根源,因为我认为 REACT 不需要它。

最佳答案

快速回答
这里的问题是您试图在未提供 CORS header 的资源上使用 subresource integrity
简短的回答是其中之一

  • 使服务器支持 CORS(仅当您控制服务器时才可能)
  • 停止进行子资源完整性检查(即,从 integrity 元素中删除 crossorigin<script> 字段)
  • 从同源位置提供脚本(即,使脚本位置和页面 URL 之间的主机和域匹配)

  • 这里到底发生了什么?integrity<script> 字段表示“仅当其内容的 SHA384 哈希与此字符串匹配时才加载此资源:xQae1pUP...
    但是,同源策略要求脚本应该尽可能少地了解从另一个源提供的资源。由于您的代码不在原始 https://fb.me 上运行,因此它不能从 https://fb.me 学习任何有关资源的信息(除非 https://fb.me 的服务器主动允许 serving an Access-Control-Allow-Origin CORS header 这样做)。
    但是,子资源完整性机制将有效地允许您检查资源,并对其内容提出一系列是/否问题:
  • "资源的哈希值是否与 sha384-xQae1pUP... 匹配?"
  • “没有?好吧,sha384-vPt5Lq1... 呢?”
  • “也不是,嗯?嗯,会不会是 sha384-18dh2ca...

  • 依此类推,直到得到正确答案,或者至少消除很多错误答案。
    如果服务器支持 CORS,那么浏览器无论如何都会允许您的脚本读取整个资源,因此浏览器肯定也会允许您的脚本确定资源的内容是否散列到特定值。

    关于javascript - 跨源资源错误 : No 'Access-Control-Allow-Origin' header is present on the requested resource,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35995498/

    10-16 16:39