Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

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

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.

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.