CORS request blocked in Firefox but not other browsers

I’m using aws-amplify to query API Gateway (configured through serverless) to trigger a lambda.

I have no trouble accessing some resources except for one, which I get using query string parameters. This is the only difference with the other queries. Yet, I get CORS error and cannot see any log for the lambda that should have been triggered nor can I see the query in the browser network console.

What confuses me is that I get this error only in firefox and not in chrome.

In my serverless configuration file for the endpoint, I do have cors to true:

  myEndpoint:
    handler: myEndpoint.main
    events:
      - http:
          path: myEndpoint
          method: get
          cors: true
          authorizer: aws_iam
          request:
            parameters:
              querystrings:
                x: true
                y: true
                z: true

I configured the custom authorizer

Resources:
  GatewayResponseDefault4XX:
    Type: 'AWS::ApiGateway::GatewayResponse'
    Properties:
      ResponseParameters:
         gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
         gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
      ResponseType: DEFAULT_4XX
      RestApiId:
        Ref: 'ApiGatewayRestApi'
  GatewayResponseDefault5XX:
    Type: 'AWS::ApiGateway::GatewayResponse'
    Properties:
      ResponseParameters:
         gatewayresponse.header.Access-Control-Allow-Origin: "'*'"
         gatewayresponse.header.Access-Control-Allow-Headers: "'*'"
      ResponseType: DEFAULT_5XX
      RestApiId:
        Ref: 'ApiGatewayRestApi'

In my lambda, I’m adding CORS headers before response

    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Credentials": true
    }

All of this is working well except for that one request with query string parameters, for which there’s a CORS error logged in the console, but not log in network and no log in CloudWatch.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://...?x=1&y=2&z=3. (Reason: CORS request did not succeed).[Learn More]

What makes it even harder for me to understand is that when I remove my parameters, I get a 502 error from the lambda (as should be) and can read what’s wrong in CloudWatch logs

    let params = {
      queryStringParameters: {
        x: 1,
        y: 2,
        z: 3
      }
    };
    API.get("api", '/myEndpoint', params); // this causes CORS error
    API.get("api", '/myEndpoint', {}); // this causes 502 (as it should)

Another thing that puzzles me is that this worked for a while and then stopped without me changing anything (except uploading a front-end to S3 and CloudFront but I fail to see where that could do something). I thought this might be caching issue but when I go to API Gateway > Stages > myStage, “Enable API cache” is not checked.

I’m really confused and would appreciate any help. Thank you.

[7hibault]

This drove me crazy but I think I figured it out…

Turns out my browser was caching an incorrect preflight response. I didn’t figure this out right away because the behavior was the same in private mode. I deactivated my addons one by one and after deactivating Ghostery, the request went through.

@powerful23 Thanks for investigating 😃

[NWRichmond]

In my case, the Privacy Badger extension was blocking subdomains, which triggered a CORS error. There’s no need to remove this extension, though - just click on the Privacy Badger icon and slide any relevant “potential tracker” settings from blocked to allowed.