4

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.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>

I got rid of the DOCTYPE tag intentionally and its not the root of the problem as I don't believe REACT needs it.

double-beep
  • 5,031
  • 17
  • 33
  • 41
NVA
  • 1,662
  • 5
  • 17
  • 24

3 Answers3

4

Quick 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 integrity and crossorigin fields 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.

Community
  • 1
  • 1
apsillers
  • 112,806
  • 17
  • 235
  • 239
  • You need to remove the crossorigin field AND the integrity field. This should be accepted as the answer. – Leachy Peachy Mar 19 '16 at 04:24
  • @apsillers I Since you explained what's really going on.. perhaps you could take a look at a similar question i asked here. https://stackoverflow.com/questions/53042123/can-babel-standalone-be-used-if-index-html-is-server-locally-no-webserver – joedotnot Oct 29 '18 at 09:14
0

Remove type="text/jsx". Its invalid and the browser isn't seeing it as a remote javascript file.

Jack
  • 8,851
  • 3
  • 21
  • 26
0

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

Karthick Kumar
  • 1,217
  • 1
  • 25
  • 38