CORS in MEAN Stack

In our previous section, we learned how to use angular http client. We fetched the post from the app.js file and showed them on to the localhost 3000/api/posts path. Previously, we faced the CORS error. This section will let us understand what it is and how we can remove this from our application.

The CORS stands for Cross-Origin Resource Sharing. That is exactly what we were doing. We separated server and client that were running on different domains. We used localhost: 3000 for the server and localhost 4200 for our angular app. The client and server both wanted to talk with each other, but they were not on the same host. If they were on the same host, they could communicate without any issue. So, if the request is coming from a different address, this gave us a so-called CORS error.

In many modern web apps, we need to allow this. It is not a security issue; it is a wanted behavior. For this, we need to expose our server API for all possible clients, and this is done by setting the right headers on the server-side response. We will use the following steps to set up the headers:

1) We will go back to our app.js file, and in this file, we will add another middleware. This middleware will run before handling the response in the following way:

The next() function is used at the end because the request should be able to continue to the next middleware.

2) Before calling next(), we need to manipulate the request or the response to be precised. We will take the response object and set the header using the setHeader() method. The setHeader() method takes the header key as a first argument and the header's value as a second argument. We will set the header name Access-Control-Allow-Origin. We have to make sure that the name should be the same as it is because this is a clearly defined header understood by the browser. We will set its value to star(*) in the following way:

This star value means no matter on which domain, the app which is sending the request, is running on. It is allowed to access our resources.

3) We also need another header name Access-Control-Allow-Headers. The first header allows which domains are able to access our resources, but now we restrict this to the domain sending the request with a certain set of header beside the default headers, e.g., the browser. We need to allow some extra headers like Origin header, X-Requested-With header, Content-Type header and Accept header in the following way:

If it has another non-default header that is not defined above, access would be blocked even though we generally allow it for all domains.

4) We will add one more header named Access-Control-Allow-Methods. In this header, we will control which http verbs may be used to send requests. We want to allow GET, POST, PATCH, DELETE, and OPTIONS. The OPTIONS is an implicit request sent by the browser by default prior to post request. So, even if never directly send such an option request from within our angular app, it will implicitly be sent, and therefore we should allow it as http verb.

With these headers, we are able to send that request. We will save it and will be able to see the server-side data into our angular app.