Add Cloudfront headers and prevent reverse proxy from stripping custom headers.

[Rafcin]

Is your feature request related to a problem? Please describe. Currently, you can't add additional CloudFront headers easily to a deployment. To add them you have to modify the serverless config during the build process and the Amplify team has to give access to the stripped headers if you use a custom domain.

Current way to modify the serverless config

  - appRoot: apps/example
    env:
    variables:
      #AMPLIFY_DIFF_DEPLOY: true
    frontend:
      phases:
        preBuild:
          commands:
            # Do pre-build stuff
        build:
          commands:
            # Run build and then copy over serverless
            - cp config/serverless.yml serverless.yml
      artifacts:
        baseDirectory: .next
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*

APPID-HERE:
  component: '@sls-next/[email protected]'
  inputs:
    timeout:
      defaultLambda: 30
      apiLambda: 30
      imageLambda: 30
      regenerationLambda: 30
    cloudfront:
      defaults:
        forward:
          headers:
            - CloudFront-Is-Desktop-Viewer
            - CloudFront-Is-Mobile-Viewer
            - CloudFront-Is-Tablet-Viewer
            - CloudFront-Viewer-Country
            - CloudFront-Viewer-Latitude
            - CloudFront-Viewer-Longitude
            - CloudFront-Viewer-Time-Zone
            - CloudFront-Viewer-City
            - Authorization
    build:
      env:
        AMPLIFY_DIFF_DEPLOY: 'false'
        AMPLIFY_MONOREPO_APP_ROOT: apps/news

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/using-cloudfront-headers.html

Describe the solution you'd like Ideally, a config option in the console would be nice. A dropdown similar to the Cloudfront behaviors dropdown would work.

The option to choose what is removed by the proxy would also be nice instead of having someone modify it. If someone plans to release 3 or 4 sites, they would need to contact the amplify team each time, therefore it would be easier to allow the users to modify it themselves per project.

[mswezey23]

This is still a thing. Ouch.

They should allow the Cloudfront configs to be editable when using AWS Amplify. I'm running into this issue with GET requests being stripped of their headers when proxied through my AWS Amplify SPA. Guess I'll reach out to support to see what's possible.

[Rafcin]

@mswezey23 So there's going to be a beta of the new build system at some point in the near future (it's been up in the air atm, check the Next 12 support thread under the hosting repo) and possibly maybe hopefully that might include a solution to the header issue.

Definitely open a support ticket they can fix the header issue! Although quick note, I was denied last time I asked because they're looking for a better way to go about doing that (so I'm guessing the beta will.bave that feature) but if you have 1 app or something it's probably no big deal.

[fnavarrodev]

I don't think they added cloudfront headers in the new releases but I'm gonna give it a try today and see.

[fnavarrodev]

I have good news and bad news. There's one header cloudfront-viewer-country now how do we get cloudfront-viewer-country-region?

[p00000001]

This is still a thing. Ouch.

They should allow the Cloudfront configs to be editable when using AWS Amplify. I'm running into this issue with GET requests being stripped of their headers when proxied through my AWS Amplify SPA. Guess I'll reach out to support to see what's possible.

@mswezey23 Did AWS Support ever offer you a solution to keep the original request headers? I'm deploying a React/Next.js app in AWS Amplify and need access to the user-agent header, which is always set to Amazon Cloudfront by Amplify.