跨域资源错误：请求的资源没有“Access-Control-Allow-Origin”头。

Question

跨域资源错误：请求的资源没有“Access-Control-Allow-Origin”头。

4

我正在尝试运行使用ReactJS库的页面，但出现以下错误：

由于跨域资源共享策略中未提供“Access-Control-Allow-Origin”头信息，因此已阻止从源“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不需要它，并且这不是问题的根源。

- NVA

1

为什么在JS文件中要使用type="text/jsx"？ - Quentin

我试过那个作为最后一分钟的解决方案尝试，当时我在探索这个问题。你可以忽略它。但是，很棒的发现。 - NVA

3个回答

0

使用Caddy是避免ReactJS中跨域错误的一种方法。它是一个类似于Apache、nginx或lighttpd的Web服务器。它易于使用和简单 caddy。

- Karthick Kumar

0

移除 type="text/jsx"。它是无效的，浏览器不会将其视为远程 JavaScript 文件。

- Jack

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- apsillers · Accepted Answer

快速回答

问题在于您尝试在未使用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，则浏览器将允许您的脚本读取整个资源，因此浏览器肯定也会允许您的脚本确定资源的内容是否哈希为特定值。