CORS request blocked in Firefox but not other browsers

[7hibault]

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.

[powerful23]

@7hibault How did you pass your aws credentials to the Amplify library?

[7hibault]

@powerful23 I have a config file with the aws credentials and then

import Amplify from "aws-amplify";
import config from "./config";

Amplify.configure({
    Auth: {
      mandatorySignIn: true,
      region: config.cognito.REGION,
      userPoolId: config.cognito.USER_POOL_ID,
      identityPoolId: config.cognito.IDENTITY_POOL_ID,
      userPoolWebClientId: config.cognito.APP_CLIENT_ID
    },
    Storage: {
      region: config.s3.REGION,
      bucket: config.s3.BUCKET,
      identityPoolId: config.cognito.IDENTITY_POOL_ID
    },
    API: {
      endpoints: [
        {
          name: "api",
          endpoint: config.apiGateway.URL,
          region: config.apiGateway.REGION
        },
      ]
    }
  });

I manage to successfully call other endpoints from the app using this configuration

[powerful23]

@7hibault the mandatorySignIn is set to true in your config which means no aws credentials will be granted when the user is not signed in. Are you sure you are using the API get when logged in?

[7hibault]

@powerful23 Yes, I'm ensuring that the user is signed in at this point. If the user isn't signed in, they get redirected to a login page.

Could you elaborate on why you think this could come from the configuration? I don't think this is the issue:

• I'm querying the API in the same manner from another page to get content with no trouble (the only differences being the query string parameters)
• The GET query works from chrome but not from firefox
• If I replace my failing query with another query that worked elsewhere, it works, so it shouldn't be that
• Wouldn't I get a missing authentication token instead if that were the issue?

[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.

[akkinenivijay]

In my case its firefox new feature "Enchanced tracking protection" caused the issue and by disabling that options, cors started working.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.