Problems with CORS

Hi, we are using ColdBox for our backend application and we are experiencing weird problems with CORS. We have a preProcess function that servers as interceptor for ajax calls and it is like this:


function preProcess( event, data, buffer, rc, prc ){

        event.setHTTPHeader( name="Access-Control-Allow-Origin", value="http://localhost:3000" );      
        event.setHTTPHeader( name="Access-Control-Request-Headers", value="" );
        event.setHTTPHeader( name="Access-Control-Request-Methods", value="GET,HEAD,POST" );
        event.setHTTPHeader(name="Allow-Control-Allow-Credentials", value="true");
        event.setHTTPHeader( name="Access-Control-Allow-Headers", value="*");

        var uuid = CreateUUID();
        var util = new com.smartvillage.api.util.ResponseUtil();
		var validator = new com.smartvillage.core.util.JsonValidator.JsonValidator();

        var model = server[ "wireBox-smartvillage" ];

    
        event.setValue( "model", model );
        event.setValue( "util", util );
        event.setValue( "validator", validator );
        event.setValue( "uuid", uuid );

        var authSvc = model.getInstance( "AuthService" );
        var ctx = arguments.event.getContext();

        util.writeData( "#arguments.event.getContext().event#-#uuid#", SerializeJSON( data ) );

        var ht = GetHTTPRequestData();
   
        var data = {
            "url"     = url,
            "form"    = form,
            "date"    = now(),
            "content" = ht.content,
            "headers" = ht.headers,
            "method"  = ht.method
        }

        if (ctx.event NEQ "auth.login" ) {
          
            var accessToken = event.getHTTPHeader("Authorization");
        
                cffile(action="append", file=expandPath('/debug.log'), output="#now()#- #accessToken# -");
                
                if (len(accessToken)) {

                    if ( !authSvc.isAuth( trim(accessToken.replace('Bearer', '')) )  ) {
                    
                        event.renderData(data="Not Authorized",statusCode="401",statusText="Unauthorized")
                            .noExecution();
    
                    } 
                } else {
    
                    echo('Token not found');
                    abort;
    
                }

        };
        
    };

As you can see, we set allow origin headers for our localhost (where the client is running) but what happens is that, whereas some ajax calls succeed, others fail for Cors problems. The below pic shows our network.

As you can see, the same call fails or succeeds randomly. And the error it gives us is this: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Why does this happen?

EDIT:

I can see it happens when there are consecutive ajax calls.

Could it be something else between the requesting computer and the server, e.g. web server (Apache, Nginx, etc…), firewall, load balancer, etc… that is stripping the header off before it gets back to the requesting computer?

Does this happen in all browsers?

How does the URL of the requesting client look like? Is the hostname and port 3000 also present in every request ? Hostname, protocol and protocol port number must match on both, client url and ajax endpoint.

I remember in the past Chrome being buggy with localhost as a hostname. Can you try setting another hostname than localhost? In CommandBox you can also use a tool called “host updater” to help setting a hostname of your choice for development.

Yes, it does!

The URL is always the same (unless there’s something we’re not seeing) but even setting Access Control Allow Origin to * does not seem to change anything.

I can try and do as you suggest but I’m afraid it won’t help :frowning:

We are using Commandbox for development! Is there a way I can check if what you’re suggesting is happening?

What javascript framework are you using? Cors issues are usually headers set wrong on backend or from javascript frontend (aka not coldbox, but whatever js framework you’re using… extjs/angular/vue/etc)

are the 200 status requests returning data?, can we see the headers of the request from the browser of failed and good requests?