CORS error related to React and Babel

Agent67

Agent67

Honorary Master
Joined
Nov 7, 2020
Messages
28,008
Reaction score
20,150
Location
Western Cape
Hey guys, can anyone help me out with this error I'm getting? I'm trying to make a webpage (SPA is the technical term I think for what I'm trying to do?) that gives you the weather in your current location. I want to use React so that I can learn more about and improve upon it (But it isn't easy when you get constant errors before you even started, lol). After looking around a bit, it seems that Babel is full of shite anyway, is there any way I can bypass the CORS error I'm having on my app.js script, without having to install loads of packages or use complicated toolchains?

P.S (I've tried removing the "text/babel" type from the script that calls app.js, but then it gives me syntax errors in the script itself. I'm using JSX for React).

My code:
github.com

take-homes/Local Weather App at main · moppel-dev/take-homes

Repo for freeCodeCamp's Take Home Projects. Contribute to moppel-dev/take-homes development by creating an account on GitHub.
github.com github.com

Thanks in advance for the help!
 
You are calling a resource from another domain, where that domain has not allowed your domain to access that resource, is what the issue comes down to at a high level..

The browser developer tools, under Console should tell you the domains at play and what is not allowed where..

The domain whose resources you are calling, should be adding some cors headers to allow your domain to access it..
 
this is nothing to do with babel.

I assume you are using some sort of dev server that runs your react?

you are probably running your react app on say port 3000 and your http server on port 8080 for eg.

but all these front end dev servers support proxy mode, where you define something "for this path, go to this server"

e.g. this is how you do it with nuxt

JavaScript: 
    proxy: {
        '/api': {
            target: 'http://localhost:5000',
            secure: false,
        },
    },

That way, in your browser, it makes calls to "/api/*, which is on the same domain, and hence no browser cors error.

Or just update your API framework to support the referer as an allowed origin
 
Barbarian Conan said:
How are you running it?
Click to expand...
I'm trying to just have it run in my HTML as a usual script type of deal (like you would link scripts that allow you to use Bootstrap or other JS scripts). I'm trying to avoid servers, toolkits, etc cause I want to upload my code to GitHub without having to install a bunch of stuff on my PC for only one project. I could use CodePen for the project but then it'll be a struggle to organize everything and get it all on to the repo.
 
PrimeSteak said:
I'm trying to just have it run in my HTML as a usual script type of deal (like you would link scripts that allow you to use Bootstrap or other JS scripts). I'm trying to avoid servers, toolkits, etc cause I want to upload my code to GitHub without having to install a bunch of stuff on my PC for only one project. I could use CodePen for the project but then it'll be a struggle to organize everything and get it all on to the repo.
Click to expand...

Modern browsers really dislike it when you just run it off the file system.

You can create an IIS site for it if it's enabled for windows, but the easiest is probably installing nodejs and then using this:
www.npmjs.com

http-server

A simple zero-configuration command-line http server. Latest version: 14.1.1, last published: 3 years ago. Start using http-server in your project by running `npm i http-server`. There are 1284 other projects in the npm registry using http-server.
www.npmjs.com www.npmjs.com

Although I REALLY recommend going the recommended route and creating a local dev environment as described on reactjs.org, or if you are following a tutorial, using what they are using.

Edit:
When people download stuff from github they expect there to be a package.json file where they can just run npm i and everything is fine. If that isn't there, it means that they should now configure a server to run your code. Already annoying.
 
reactjs.org

Creating a React App – React

The library for web and native user interfaces
reactjs.org reactjs.org

So after looking around for hours and contemplating whether I should smash my laptop into pieces, I came upon the link above and Babel's docs. And after a few more minutes of struggling, everything is up and running, now I can just start coding tomorrow
 
@PrimeSteak, I cruised through your linked repo quick.

A few remarks.
1. If you are using react, forget about jquery. These two go together like soap and oil.

It's not that you cannot use them together, hell anything is possible, but you are setting yourself up for many many state based headaches.

2. Do you have html / css and js down pat, meaning have you taken a deep dive into each of those, to understand why you use each one, and what it's used for.

Chucking a whole bunch of code into a file or including libraries or frameworks without understanding the underlying need, or capabilities is going to cause you a world of frustration. You need to ask why, how and later when. Why do I need this, how does it work, and when does it do what I need if to do.

3. For a weather app, you might not need react. Sure it's a great toolkit to have in your arsenal, but are you whipping out a sledge every time you want to drive in a nail?

React is a renderer, it puts things on screen in a declerative way. If you don't know what that means, then react is probably not the right tool for the job.

Learn the basics, in this case, api Auth and fetch first. You'll soon come to realize that what you're asking the browser to do, it cannot.

The browser is a box of tools, pre-built for you, to use and extend as you see fit. You need to understand the browser, and what is available to you. (Sites like mdn and caniuse do a good job of documenting this)

See the woods from the trees. Learn each part, and once you "get it" you will realize that every piece you build, from html right down to the most hard-core sql operation, is like composing music, the notes, the instruments all have to play the right notes, at the right time, and you are the composer.

Have an amazing day, and take it slow, learning is like making honey, it takes time, but the results are forever and tastes great.
 
MagNorthDigital said:
@PrimeSteak, I cruised through your linked repo quick.

A few remarks.
1. If you are using react, forget about jquery. These two go together like soap and oil.

It's not that you cannot use them together, hell anything is possible, but you are setting yourself up for many many state based headaches.

2. Do you have html / css and js down pat, meaning have you taken a deep dive into each of those, to understand why you use each one, and what it's used for.

Chucking a whole bunch of code into a file or including libraries or frameworks without understanding the underlying need, or capabilities is going to cause you a world of frustration. You need to ask why, how and later when. Why do I need this, how does it work, and when does it do what I need if to do.

3. For a weather app, you might not need react. Sure it's a great toolkit to have in your arsenal, but are you whipping out a sledge every time you want to drive in a nail?

React is a renderer, it puts things on screen in a declerative way. If you don't know what that means, then react is probably not the right tool for the job.

Learn the basics, in this case, api Auth and fetch first. You'll soon come to realize that what you're asking the browser to do, it cannot.

The browser is a box of tools, pre-built for you, to use and extend as you see fit. You need to understand the browser, and what is available to you. (Sites like mdn and caniuse do a good job of documenting this)

See the woods from the trees. Learn each part, and once you "get it" you will realize that every piece you build, from html right down to the most hard-core sql operation, is like composing music, the notes, the instruments all have to play the right notes, at the right time, and you are the composer.
Click to expand...
Hey man, you can take a gander at my repo again if you like, I finished the project yesterday.
Anyway, I feel a bit more comfortable with React and the concept of front-end frameworks now after this project. The only reason why jquery is there is because of Bootstrap, lol. I completely get HTML, CSS and JS now, I struggled a bit with JS at first but now I'm totally comfortable with it. I usually use either MDN or W3Schools for my doc needs. I'm totally down with AJAX and querying APIs as well. I still struggle with the whole NPM, package.json, toolkit, etc. thing.

I'm considering looking into taking this course as well this year to learn how to use JS in a backend context and get better at NPM.

But on the other side, I want to chill out for the rest of the year. I at least got this Edx certificate and a JS certificate from FreeCodeCamp so I think I've filled my learning quota for the year, lol.
MagNorthDigital said:
Have an amazing day, and take it slow, learning is like making honey, it takes time, but the results are forever and tastes great.
Click to expand...
You should also have an amazing day, m8
 
@PrimeSteak, that is an impressive amount of new knowledge you now have certification for, and no one can take it away. Congratulations, on going through those courses and sticking to it. I could not agree more, a bit of down time is just around the corner, and is usually where our best ideas come from :)

Personally, I've always had the unpopular opinion that bootstrap is counter-intuitive for developers. It's great to get going fast, but you incur a ton of technical debt later in a project. As with all libraries and frameworks it's a toss-up between what works now, vs what is upgradable later.

NPM is like going to a carnival or expo. Everyone has something they think is useful, mind-blowing or just another tool in their toolbox.

Think of npm like you would any other module system, like python, Java, C++, and you'll be good.

Take some care in learning git, and how to manage branches, how to perform local and remote operations, resolve merge conflicts etc... cause in a dev house / studio, this more often a headache than the actual code solution.

Cheers!
 
MagNorthDigital said:
Think of npm like you would any other module system, like python, Java, C++, and you'll be good.

Take some care in learning git, and how to manage branches, how to perform local and remote operations, resolve merge conflicts etc... cause in a dev house / studio, this more often a headache than the actual code solution.

Cheers!
Click to expand...

And do yourself a favour, which is in line with the general thinking in this thread, DO NOT use git desktop GUI's.
Otherwise, you end up knowing how to use e.g. VS Code SCM, not actual git.

also dont get into bad habits - I have a rule for all our developers - you may not use "git add ." - this is a sure-fire way to commit a node_modules, or secrets to the repo.

Here is an extract from our rules/processes around git

  • A developer must know EXACTLY what they are committing in every commit. If you are committing debug logging, temporary files, etc, it is because you are not actively reviewing your pre-commits.
    • DO NOT use git add .
  • A developer must know EXACTLY what branch they are committing to. If you commit to the incorrect branch, this is most likely the case of you not pre-reviewing the current working branch before committing.
Click to expand...
 
_kabal_ said:
And do yourself a favour, which is in line with the general thinking in this thread, DO NOT use git desktop GUI's.
Otherwise, you end up knowing how to use e.g. VS Code SCM, not actual git.

also dont get into bad habits - I have a rule for all our developers - you may not use "git add ." - this is a sure-fire way to commit a node_modules, or secrets to the repo.

Here is an extract from our rules/processes around git
Click to expand...
Isn’t it easier just to setup .gitattributes and .gitignore files?
 
DA-LION-619 said:
Isn’t it easier just to setup .gitattributes and .gitignore files?
Click to expand...
well of course you do that too

that wont stop someone from editing a non-ignored file, like say "appsettings.json", putting in a secret that should go into "appsettings.Development.json" (which is ignored), committing and pushing.

or creating a bare repo, adding an origin, running npm init, adding a package, and committing everything.

sometimes you need to protect from stupid with process, while using tooling for as much automation as possible
 
_kabal_ said:
And do yourself a favour, which is in line with the general thinking in this thread, DO NOT use git desktop GUI's.
Otherwise, you end up knowing how to use e.g. VS Code SCM, not actual git.

also dont get into bad habits - I have a rule for all our developers - you may not use "git add ." - this is a sure-fire way to commit a node_modules, or secrets to the repo.

Here is an extract from our rules/processes around git
Click to expand...

Naah, miss me with that.

I commit everything I want to MY branch. From debugger statements to commented out code. Everything.
I like to make a snapshot of where I am before I sign off for the day. I push every day as well as I don't want to lose a day's work due to a crashed harddrive or stolen laptop. If I were to be hit by a bus, my colleagues have access to my branch.

I will clean up my branch before publishing the PR and inviting reviewers though.

Also, having a nice GUI that shows me what is staged and what isn't, with an easy to use comparison tool is invaluable. I can and have used the command line before and still do for some tasks. For adding and committing changes? Nah, I'll use a GUI for that.

If for some strange reason people in a team push directly to master on the other hand....
 
You must log in or register to reply here.
Back
Top
Sign up to the MyBroadband newsletter
X