This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Alestor Aldous
So What is CORS ?
CORS stands for Cross Origin Resource Sharing is mechanism that allows a website on one url to request data from another url . This error has been a pain for both front end and backend developer from start . Your webpage might be trying to fetch data from another url and end up with a error in the console
Trust me sometimes CORS Error is a huge pain for web dev out there :
Something like this :
Well this happen because of the browser's security policy
Well what is this policy in simple words :
This policy allows a webpage from its own url but blocks anything from another url unless certain conditions are met.
Well if you open up the devtools you might be able to view the headers of request in which there is a origin header which specifies origin url if that request goes to the server in the same origin then its allowed by the browser
What happens when request goes to a different url :
This type of request is known as Cross Origin Requests
After reciving the request by the server it adds a
Access-Control-Allow-Origin header in the response .
If Access-Control-Allow-Origin does not match with Origin Header then browser prevents the response from being used by the client side app
So What's the solution ?
Well we can solve this issue at the backend side . We only need to set backend to respond with the proper header
If your express.js this issue can be solved using cors module
Install module by npm :
npm i cors
Usage :
var cors = require('cors')
We can set express js to respond with a proper header with a 1 line middleware code
app.use(cors({origin:'http://yourawesomeurl.net'}))
When facing a CORS Error
Step 1 :
Open up network tab of devtools find the response and check for
Access-Control-Allow-Origin
header . If it doesnt exist then you have to enable cors on server side
other wise the url might be a mismatch
Well if you dont own the server then you're doomed
And thats CORS Error in 5 minutes hope this articles helps you out
Conclusion :
Don't Worry Just Stay Awesome :D & Merry Christmas!!
Keep Coding !!!
🙏 Share with your friends on Twitter
This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Alestor Aldous
Alestor Aldous | Sciencx (2022-12-25T16:42:39+00:00) CORS Error in 5 minutes. Retrieved from https://www.scien.cx/2022/12/25/cors-error-in-5-minutes/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.