跨源资源错误:请求的资源上不存在“访问控制允许源”标头

Cross Origin Resource Error: No 'Access-Control-Allow-Origin' header is present on the requested resource

本文关键字：资源 访问控制 标头 不存在 许源 错误 请求      更新时间：2023-09-26

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

跨源资源共享策略已阻止在源"https://fb.me"处重定向：请求的资源上不存在"访问控制-允许源"标头。因此，不允许访问源"http://localhost:55042"。

我的代码如下所示：

<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 标头提供的资源使用子资源完整性。

简短的回答是以下之一

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

这到底是怎么回事？

<script>的integrity字段显示"仅当其内容的 SHA384 哈希与此字符串匹配时才加载此资源：xQae1pUP...

但是，同源策略要求脚本应尽可能少地了解从另一个源提供的资源。由于您的代码不在源https://fb.me上运行，因此它不得从https://fb.me学习有关资源的任何信息（除非https://fb.me的服务器通过提供Access-Control-Allow-Origin CORS 标头主动允许这样做）。

但是，子资源完整性机制将有效地允许您使用一系列有关其内容的是/否问题来检查资源：

  • "资源的哈希是否与sha384-xQae1pUP...匹配？"
  • "不？好吧，sha384-vPt5Lq1...呢？
  • "也不是吧？嗯，会不会是sha384-18dh2ca...？

依此类推，直到你得到正确的答案，或者至少消除很多错误的答案。

如果服务器支持 CORS，那么浏览器将允许脚本读取整个资源，因此浏览器肯定也允许脚本确定资源的内容是否哈希为特定值。

删除type="text/jsx" 。它无效，浏览器没有将其视为远程 javascript 文件。

使用 Caddy 是避免 reactjs 中 cors 错误的一种方法。它是一个像Apache，nginx或lighttpd这样的Web服务器。使用球童既简单又简单

相关文章：