Are You thing the same? What Is CORS?
CORS stands for Cross-Origin Resource Sharing!
About Me :)
Cross-Origin Resource Sharing (CORS) is a protocol that enables scripts running on a browser client to interact with resources from a different origin.
I will be sharing in my own Language and try my best to let you all understand completely.
You all would be familiar with API call's and we prefer API endpoint call to make our application fast and easy to handle.
The API's calls are truly possible because of
CORS in the API requests. Here is a quick hint :), CORS is the only thing which makes
Before CORS became standardized there was no way to call an API endpoint under the different domains for security reasons. This was (and to some degree still is) blocked by the Same-Origin Policy.
Here is my domain -> https://hemant.codes/
Consider I have to access the data from different domains ex.
Here I try to make API requests with my Domain hemant.codes.
The API request will show error even if you make the request to your domain too
Before CORS the PHP code was embedded in HTML code, without cors, if you make NODE application, you will have to use
EJS or PUG
Here is an example of without CORS in NODE js with using EJS.
This is my GitHub Please follow and 🌟 me on github.
Here I didn't use CORS and embedded the Ejs template in NodeJS code;
But when we use CORS and make a get request it would show and error;
You need to initially install CORS module.
npm I --save cors
When you are done with CORS installation
You need to add cors to your express code;
var cors = require('cors') var app= express() app.use(cors())
Don't mind the code if I miss; in code😼;
This is how you will avoid error and make API call with external Applications;
This mechanism prevents attackers that plant scripts on various websites like an add, to make an AJAX call to www.yourbank.com and in case you were logged in making a transaction using your credentials.
CORS uses a few HTTP headers — both in request and response — but the ones you must understand in order to be able to continue working are:
More about CORS can we found in Web documents of CORS;
If you enjoyed the post don't forget to ❤️ and 🦄 to the post
Do check out this mind map for full stack web developer
This is A roadmap or you can spell it mindmap for Developer's , this is for frontend and Full stack developer , all the people who belive in them and want to grow faster can work with this mindmap.
Mind Map For Full Stack/ Front End Developers In 2020
##Front End MindMap
##Full Stack MindMap
##Full Stack Mind Map.
Back End -Full Stack(image)
Dedicated Front End Mind Map.
Junior Frontend Developer Junior Frontend Developer (image)
Middle Frontend Developer Middle Frontend Developer (image)
Senior Frontend Developer Senior Frontend Developer (image)
This content is distributed under CCA v3 license: https://creativecommons.org/licenses/by/3.0/deed.en (added a note to the original repo).
Frontend From: https://github.com/ivan-kleshnin/frontend-mindmaps
And BAckend from: https://github.com/kamranahmedse/developer-roadmap
Youtube Clone ,built using ReactJS , Material UI and the API used is Youtube V3 data API , With max search result set to 5.
This project was bootstrapped with Create React App.
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
npm run build
Builds the app for production to the
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
npm run eject
Note: this is a one-way operation. Once you
eject, you can’t go back!
If you aren’t satisfied with the build tool…
Thank You for Reaching out;
If you need any help do ping me on DevTo or twitter.
Hope you enjoyed the post