CORS header ‘Access-Control-Allow-Origin’ missing if http status code is not 200

Question

I am using restivus plugin to handle my Api Requests.

The issue I am facing is:

If Api returns 200 status code, everything works fine.

But if I send invalid Authentication Bearer Token in header or if any error returns from API, e.g 422, 401, 400 .. etc, my ajax request fails and gives this error:

CORS header ‘Access-Control-Allow-Origin’ missing

Here is my restivus confiqurations:

myApi = new Restivus({

    apiPath: 'api/',
    defaultHeaders: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": "true",
      "Access-Control-Allow-Headers": "Access-Control-Allow-Headers, Access-Control-Request-Method, Connection, Content-Language, Access-Control-Request-Headers, Origin, X-Requested-With, Content-Type, Accept-Language, Accept, Z-Key, Authorization, client-id, client-secret, client_id, client_secret",
      "Content-Type": "application/json",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
    },
    enableCors: true,
    useDefaultAuth: false,
    prettyJson: true,
    defaultOptionsEndpoint: {
        action: function() {
            this.response.writeHead(201, {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Credentials": "true",
                "Access-Control-Allow-Headers": "Access-Control-Allow-Headers, Access-Control-Request-Method, Connection, Content-Language, Access-Control-Request-Headers, Origin, X-Requested-With, Content-Type, Accept-Language, Accept, Z-Key, Authorization, client-id, client-secret, client_id, client_secret",
                "Content-Type": "application/json",
                "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
            });
            this.done();
            return {
                status: "success",
                "data": {
                    "message": "We love OPTIONS"
                }
            };
        }
    }
});

Does anyone know what I am missing here?

Answer 1

I know it's usually standard to not send headers like Access-Control-Allow-Origin on failed requests (4xx, 5xx). I've worked around this in the past by hosting an API behind a web server like Apache, then instructing the web server to always set the Access-Control-Allow-Origin response header, ignoring the status code.

(This is one option. An example of this can be found here)

I also went and looked at the Restivus documentation specifically under the defaultHeaders configuration to see if they mention this behavior. Unfortunately, they don't mention this. But they do mention that you can override the default header behavior by explicitly providing the headers in your response object.

So you could define a Response class similar to this

class Response{
    constructor(statusCode, body){
        this.statusCode = statusCode;
        this.body = body;
        this.headers = {
            "Access-Control-Allow-Origin": "*"
        };
    }
}

Then just return a Response object anytime you are sending a response, obviously setting statusCode and body as required.