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 Nicholas Bright
Nicholas Bright
15,273 Points

Babel Standalone not Working on Local HTTP Server

I'm having trouble getting Babel to work on my local environment. I am running a local HTTP Server with Python. I'm getting this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///Users/nikkismacbookpro/Documents/Treehouse_Files/React_Basics/scoreboard/app.js. (Reason: CORS request not http).

I have tried using firefox (my default) and chrome. I have gotten the same error on both browsers. I also tried adding the attribute "charset='utf-8'" (found on a stack overflow answer), but that also did not work.

1 Answer

Corina Meyer
Corina Meyer
9,990 Points
Corina Meyer
Corina Meyer
9,990 Points

The error message you pastet looks like you're trying to access a file via an absolute path on the file system. If you use a local server to serve your files, you should avoid mixing it with accessing files through the file system.

Nicholas Bright
Nicholas Bright
15,273 Points

It was working fine before I added the babel library, though. And the only times I use the file system to access files is when I source my css and javascript files:

<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/babel.min.js"></script> <script type="text/babel" src="app.js"></script> </body>

How do I access those files without referencing them directly? I'm pretty sure I'm doing it the same way Giul does it in the video.