Why Do I Get The Error: "no 'access-control-allow-origin' Header Present On The Requested Resource" Although I Specified The Necessary Header?

QUESTION: I am getting an error whenever I make an AJAX request to my subdomain. The error tells me there is no 'Access-Control-Allow-Origin' header present on the requested resour

Solution 1:

It's been a long time since I used node, but just looking at the code, I think you need to remove the headers in your client request.

Then make sure that these are added in your server response:

Access-Control-Allow-Origin:https://example.comAccess-Control-Allow-Credentials:true

Check if the cors package in node does not already does this.

You send the header on the / <- endpoint but you call a /endpoint in your client. That last route probably does not set any access control headers headers.

To debug: Check your developer console -> network to see what URLs are being accessed and what the response headers are. There you should see these access-control headers.

If you don't see them there, it means something is not working on your server-side.

Here are some good examples on this: https://github.com/expressjs/cors

And just to be sure: make sure you are calling the API from https://example.com because https://www.example.com will

Solution 2:

You might be missing the Vary header. Check my Vary header section.

Explanation

In client-server architecture, Access-Control-Allow-Origin is a server-side header via which it can tell the browser whether or not it is allowed to access resources on the server.

Read this excellent mozilla documentation

In modern browsers, even before a client makes a request to the server, the browser makes a pre-request (a.k.a Pre-Flight Request) to check whether or not the client is allowed to make requests to server. The server should response with appropriate headers to the browser for the pre-flight request. In response, the server has to send the Access-Control-Allow-Origin header. If your hostname is returned in server response, browser will allow you to make that call, or else will block the call.

Very commonly, the server replies with * as the value of Access-Control-Allow-Origin to instruct browser that everyone can make a call, but obviously this is not considered a good practice until you intend to make your server available to public.

The Vary header

As per documentation,

If the server specifies an origin host rather than "*", then it must also include Origin in the Vary response header to indicate to clients that server responses will differ based on the value of the Origin request header.

Access-Control-Allow-Origin: https://developer.mozilla.orgVary: Origin

Notes

You can only have either a * or a specific value for this field. You cannot have comma separated value to allow multiple hosts. Just in case you want to allow multiple hosts (e.g. localhost for local testing, and example.com for production), then you can easily write some logic on your server side as below:

let list = ['example.com', 'localhost']
if (request.headers.origin in list) {
    response.headers['Access-Control-Allow-Origin'] = request.headers.origin
}

Above PSEUDO-CODE basically checks if your requester is in your allowed list of hosts, then send that host as the response.