loading...

Understand CORS, Why Is CORS So Important For Web Development?

hemant profile image Hemant Joshi ・3 min read

Hii Dev's;

Are You thing the same? What Is CORS?

CORS stands for Cross-Origin Resource Sharing!


About Me :)

Hey, I Am Hemant Joshi an 18-year-old developer. I love JavaScript And React JS and Mostly Develop With JS


Begin With CORS

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 MICROSERVICES possible.

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 an example below

Here is my domain -> https://hemant.codes/

Consider I have to access the data from different domains ex.

Goggle.com
hemant.codes/projects

Alt Text

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;

For Express();

You need to initially install CORS module.

1.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;

About CORS

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.

If the server does not respond with specific headers to a “simple” GET or POST request — it will still be sent, the data still received but the browser will not allow JavaScript to access the response.


Access-Control-Allow-What

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:

1.Access-Control-Allow-Origin

2.Access-Control-Allow-Credentials

3.Access-Control-Allow-Headers

4.Access-Control-Allow-Methods


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

GitHub logo 8bithemant / Mindmap-Full-Stack

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

Mindmap

Mindmap

Mindmap

##Full Stack MindMap

Mindmap

##Full Stack Mind Map.

Back End -Full Stack(image)

Dedicated Front End Mind Map.

  1. Junior Frontend Developer Junior Frontend Developer (image)

  2. Middle Frontend Developer Middle Frontend Developer (image)

  3. 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

Make sure to follow me on github, I share a lot of JavaScript and Web development stuff on Github.

GitHub logo 8bithemant / Youtube-Clone

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.

Available Scripts

In the project directory, you can run:

npm start

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.

npm test

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 build folder.
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

Posted on Jun 28 by:

Discussion

markdown guide
 

I believe cors is only the browser thing. There are some ways to bypass the cors on browser , Chrome for example. We can turn off the check for cors. Other than that we can use a proxy.
Cors has nothing relates with MicroServices

 

No CORS is used to enable scross origin data sharing.
If you make API call ex.

Api: localhost:3000/api/call

In my React App which runs on localhost 5000

The api wouldn't be valid, unless and untill I use cors in my backend.

This is what brough microservices in power!

And we can enable or disable cors in chrome, but it affects security mesaures.

And cors is the best mean for connecting backend to frontend by mean of API.

Thank you!

 

You are all a bit right I think.

So, CORS being a browser thing: Initially, browsers wouldn't allow a running script to make calls to any resources from another origin. Now they do using CORS. We configure CORS using the extra CORS headers available. It is a "browser thing" in terms of the fact that the policy enforcer is the browser. So the entity blocking access to extra origin resources is the browser. The minute you have moved outside of the browser space unless you implemented some sort of CORS policy enforcement yourself, CORS does not apply.

So in your example @hemant , running your service on localhost:3000, if I just build the request myself (outside of a browser) there is nothing stopping me accessing the resource in terms of CORS.

So in terms of policy enforcement, it is only browser-specific.

In relation to what you do on the backend: For the browser to do CORS policy enforcement it specifies a number of headers that must be set, depending on the situation (credentials, methods, extra headers), but the simplest is Access-Control-Allow-Origin. So on the backend, we do have to do something to allow cross-origin calls, and it is just setting the relevant headers, otherwise, the browser will not give the extra origin script access to the resource. As above, outside of the browser environment this does not apply.

In relation to CORS being needed for microservices: It is most definitely extremely useful, but it isn't strictly needed. If we are considering service to service communication, CORS is not a consideration in this domain. Unless you implemented something CORS like yourself, services can communicate with each other just fine without it.

It is only a consideration for your public (browser accessed) API. But not required, I could just create a number of microservices, the public (browser accessed) elements of which are all within one API gateway and so under the same origin.

Of course, we couldn't share them (unless we did it all on the backend), and that is where the CORS relaxation on SOP is useful.

 

It isn't just a front-end thing. If you google Spring Boot CORS you'll find an article about "Enabling Cross Origin Requests for a RESTful Web Service" which is all about back-end configuration.