I am trying to run a page that makes use of ReactJS Library. I am getting the below error:
Redirect at origin '' 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="/[email protected]/dist/react.js" integrity="sha384-xQae1pUPdAKUe0u0KUTNt09zzdwheX4VSUsV8vatqM+t6X7rta01qOzessL808ox" crossorigin="anonymous"></script>
<script type="text/jsx" src="/[email protected]/dist/react-dom.js" integrity="sha384-A1t0GCrR06cTHvMjaxeSE8XOiz6j7NvWdmxhN/9z748wEvJTVk13Rr8gMzTUnd8G" crossorigin="anonymous"></script>
<script src=".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>
I got rid of the DOCTYPE tag intentionally and its not the root of the problem as I don't believe REACT needs it.
I am trying to run a page that makes use of ReactJS Library. I am getting the below error:
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./[email protected]/dist/react.js" integrity="sha384-xQae1pUPdAKUe0u0KUTNt09zzdwheX4VSUsV8vatqM+t6X7rta01qOzessL808ox" crossorigin="anonymous"></script>
<script type="text/jsx" src="https://unpkg./[email protected]/dist/react-dom.js" integrity="sha384-A1t0GCrR06cTHvMjaxeSE8XOiz6j7NvWdmxhN/9z748wEvJTVk13Rr8gMzTUnd8G" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./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>
I got rid of the DOCTYPE tag intentionally and its not the root of the problem as I don't believe REACT needs it.
-
1
Why
type="text/jsx"on a JS file? – Quentin Commented Mar 14, 2016 at 19:06 - I tried that as a last minute solution attempt while trying to explore the problem. You can ignore that. But good catch. – NVA Commented Mar 14, 2016 at 19:19
3 Answers
Reset to default 4Quick answer
The problem here is that you are attempting to use subresource integrity on a resource that is not served with CORS headers.
The short answer is one of
- Make the server support CORS (only possible if you have control of the server)
- Stop doing subresource integrity checking (i.e., remove the
integrityandcrossoriginfields from your<script>elements) - Serve the script from a same-origin location (i.e., make the host and domain match between the script location and the page URL)
What's really going on here?
The integrity field of your <script> says "Only load this resource if the SHA384 hash of its contents matches this string: xQae1pUP..."
However, the same-origin policy requires that a script should know as little as possible about a resource served from another origin. Since your code is not running on the origin https://fb.me, it must not learn anything about resources from https://fb.me (unless the server at https://fb.me actively allows this by serving an Access-Control-Allow-Origin CORS header).
However, the subresource integrity mechanism would effectively allow you to inspect the resource with a series of yes/no questions about its contents:
- "Does the resource's hash match
sha384-xQae1pUP...?" - "No? Okay, what about
sha384-vPt5Lq1...?" - "Not that either, huh? Well, could it be
sha384-18dh2ca...?"
And so on, until you get the right answer, or at least eliminate a lot of wrong answers.
If the server supports CORS, then the browser will allow your script to read the entire resource anyway, so the browser will certainly also allow your script to determine if the resource's contents hash to a particular value.
Remove type="text/jsx". Its invalid and the browser isn't seeing it as a remote javascript file.
Using Caddy is a way to avoid cors error in reactjs. Its a web server like Apache, nginx, or lighttpd. It's easy and simple to use caddy