0

I am following a tutorial for express with the following routes:

module.exports = function(app) {
    app.use(function(req, res, next) {
        res.header(
            "Access-Control-Allow-Headers",
            "x-access-token, Origin, Content-Type, Accept" 
        );
        next();
    });

    app.post(
        '/api/auth/signup',
        [
            verifySignUp.checkDuplicateUsernameOrEmail,
            verifySignUp.checkRolesExist
        ],
        controller.signup
    );

    app.post('/api/auth/signin', controller.signin);
};

In layman's terms what do these headers do and why are they included in the response? I thought headers were set as part of a request.

I have also tried the app with the headers removed and it functions fine, so not sure what the use is.

Kex
  • 8,023
  • 9
  • 56
  • 129
  • `Origin` here does nothing I think. `x-access-token` allows this custom header in a cross origin request which would otherwise be blocked. `Content-Type` and `Accept` are already allowed, but adding them here bypasses the [additional restrictions](https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_request_header#additional_restrictions). This alone won't do anything unless cors requests are allowed through `Access-Control-Allow-Origin`. – Annan Yearian Oct 07 '22 at 13:39

1 Answers1

1

Whenever a request to a server is made from cross origin (say you're requesting an API hosted at Domain A from Domain B), generally the browser blocks them for security reasons. To navigate (this might not be the 'right' word; it's, in fact, the only way of doing) this, there's a mechanism called CORS (cross origin resource sharing) in which the server has to explicitly say that it wants to allow resource sharing with other domains(origins) too. Now, to 'tell' this, the response has to contain right CORS headers which is Access-Control-Allow-Origin header.

So in layman terms, it's just a mechanism to inform the browser, "Hey! Look, I deliberately want to send this response to another origin. Don't block it."

So let's say. if the server responds with a wildcard:

 Access-Control-Allow-Origin: *,

This means, the resource can be accessed by any domain.

Similarly, if the server sends

Access-Control-Allow-Origin: "https://example.com"

Then, this means the resource can be accessed only on this particular domain which is "https://example.com"

This is my understanding.

For more technical details, you may read: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

ABGR
  • 4,631
  • 4
  • 27
  • 49
  • Thanks so much! That cleared up a lot. But what is the difference between this and the `cors` package I'm using which has `app.use(cors({origin: 'http://localhost:8000'}));`? – Kex May 29 '20 at 02:14
  • Practically, there's no difference. Instead of manually modifying the `Headers`, now we're using a `middleware` which does the job. Here's a good article on the same. https://auth0.com/blog/cors-tutorial-a-guide-to-cross-origin-resource-sharing/ see the section *Using the CORS middleware for Express* – ABGR May 29 '20 at 02:48
  • 1
    This does not answer the question. The use case for `Access-Control-Allow-Origin` is clear. I cannot understand the use case for `Access-Control-Allow-Headers` , which the question is about. – Annan Yearian Oct 07 '22 at 13:25