Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Maria Te
Maria Te
8,521 Points

There's a weird error on my console and it's really bugging me.

The error says: "Access to XMLHttpRequest at 'file:///Users/mariaisabellete/Downloads/scoreboard/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https."

I don't know what's going on. Please help. Thank You

Maria Te
Maria Te
8,521 Points

This is my code: 

const title = <h1>Using REACT</h1>;

const description = <p>First time using REACT</p>;

const header = React.createElement( 
    'header',
    null,
    title, description
);

ReactDOM.render(
    header, document.getElementById('root')
);

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scoreboard</title>
    <link rel="stylesheet" href="./app.css" />
  </head>

  <body>

    <div id="root">
    </div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="./app.js"></script>
  </body>
</html>

1 Answer

Liam Clarke
Liam Clarke
19,938 Points

Hi Maria

It seems like your getting that issue because the way you are referencing the src on your app.js file. the CORS error you are getting is Cross Origin Resource Sharing, this article explains it very well.

How are you running this code?

If you run this on a local server then you should be fine, I have just tested running it on a local server and didn't receive any errors

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scoreboard</title>
    <link rel="stylesheet" href="/app.css" />
  </head>

  <body>

    <div id="root">
    </div>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel" src="/app.js"></script>
  </body>
</html>

const title = <h1>Using REACT</h1>;

const description = <p>First time using REACT</p>;

const header = React.createElement( 
    'header',
    null,
    title, description
);

ReactDOM.render(
    header, document.getElementById('root')
);
Maria Te
Maria Te
8,521 Points

Well, I'm not sure. I am using a file and the beginning is file:///. Not sure if that makes any difference though. But thank you!