我正在尝试运行一个使用 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 不需要它。
最佳答案
快速回答
这里的问题是您正在尝试使用 subresource integrity在未提供 CORS header 的资源上。
简短的回答是其中之一
- 使服务器支持 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/