SSR request loses original headers

[seankovacs]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React, Next.js

Amplify APIs

Authentication, REST API, GraphQL API, DataStore

Amplify Categories

auth, storage, function, api

Environment information

``` # Put output below this line System: OS: macOS 11.4 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 1.41 GB / 32.00 GB Shell: 5.8 - /usr/local/bin/zsh Binaries: Node: 14.16.1 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 6.14.12 - /usr/local/bin/npm Browsers: Chrome: 92.0.4515.107 Firefox: 88.0 Safari: 14.1.1 npmPackages: @ampproject/toolbox-optimizer: undefined () @aws-amplify/ui-react: ^1.2.6 => 1.2.6 @babel/core: undefined () @fortawesome/fontawesome-svg-core: ^1.2.35 => 1.2.35 @fortawesome/free-brands-svg-icons: ^5.15.3 => 5.15.3 @fortawesome/free-solid-svg-icons: ^5.15.3 => 5.15.3 @fortawesome/react-fontawesome: ^0.1.14 => 0.1.14 @material-ui/core: ^4.12.2 => 4.12.2 @material-ui/lab: ^4.0.0-alpha.60 => 4.0.0-alpha.60 @styled-system/theme-get: ^5.1.2 => 5.1.2 amphtml-validator: undefined () arg: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: ^4.2.0 => 4.2.0 babel-plugin-styled-components: ^1.11.1 => 1.13.2 bfj: undefined () cacache: undefined () ci-info: undefined () comment-json: undefined () compression: undefined () conf: undefined () content-type: undefined () cookie: undefined () css-loader: undefined () debug: undefined () devalue: undefined () escape-string-regexp: undefined () file-loader: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () gzip-size: undefined () http-proxy: undefined () ignore-loader: undefined () imagemin-mozjpeg: ^9.0.0 => 9.0.0 imagemin-optipng: ^8.0.0 => 8.0.0 imagemin-svgo: ^8.0.0 => 8.0.0 is-animated: undefined () is-docker: undefined () is-wsl: undefined () json5: undefined () jsonwebtoken: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () mini-css-extract-plugin: undefined () nanoid: undefined () neo-async: undefined () next: ^10.0.1 => 10.2.3 next-compose-plugins: ^2.2.1 => 2.2.1 next-fonts: 1.5.1 => 1.5.1 next-optimized-images: ^2.6.2 => 2.6.2 ora: undefined () postcss-flexbugs-fixes: undefined () postcss-loader: undefined () postcss-preset-env: undefined () postcss-scss: undefined () prop-types: ^15.7.2 => 15.7.2 rc-drawer: ^4.1.0 => 4.4.0 rc-tabs: 11.7.1 => 11.7.1 react: ^17.0.1 => 17.0.2 react-accessible-accordion: 3.3.3 => 3.3.3 react-anchor-link-smooth-scroll: ^1.0.12 => 1.0.12 react-dom: ^17.0.1 => 17.0.2 react-icons-kit: ^1.3.1 => 1.3.1 react-reveal: ^1.2.2 => 1.2.2 react-scrollspy: ^3.4.3 => 3.4.3 react-select: ^3.1.0 => 3.2.0 react-stickynode: 3.0.4 => 3.0.4 recast: undefined () resolve-url-loader: undefined () sass-loader: undefined () schema-utils: undefined () semver: undefined () send: undefined () source-map: undefined () string-hash: undefined () strip-ansi: undefined () styled-components: ^5.2.1 => 5.3.0 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () styled-system: 5.1.5 => 5.1.5 terser: undefined () text-table: undefined () unistore: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () npmGlobalPackages: @cloudflare/wrangler: 1.18.0 debundle: 0.5.4 depcheck: 1.4.2 electron-icon-builder: 2.0.1 gatsby-cli: 2.16.2 npm: 6.14.12 ```

Describe the bug

The request object returned from getServerSideProps context doesn't include the original request headers from the browser (namely referer, user-agent).

Expected behavior

Ideally SSR has the original browser request (headers at-least) at hand to make decisions.

Reproduction steps

1. Stand up a plain NextJs templated site on amplify (hello world even)
2. In the index.js (or any other page), drop in this SSR code:

   export async function getServerSideProps(context) {
   console.log(JSON.stringify(context));
   const referer = context.req.headers?.referer
   if (referer !== 'https://checkout.stripe.com/') {
       return {
           redirect: {
               permanent: false,
               destination: "/"
           }
       }
   }else {
       return {
           props: {}
       }
   }
   }

3. Deploy - go check out your cloudwatch logs (would be nice to have these labeled)
4. Headers for the request return Cloudfront specific headers (e.g "user-agent": "Amazon CloudFront") ...and referer is dropped completely.

Code Snippet

See above

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[RealDrewKlayman]

@chrisbonifacio I can re-produce it

Just create a route in pages/api/(yourroute).js

then in that route return res.status(200).send(req.headers.referer)

then create a page in pages/(yourpage).jsx

and in that do an axios.get('/api/(yourroute)');

in local you'll see the referer is the URL of that page you are on but if you do it after it goes through Amplify, it's undefined.

[chrisbonifacio]

@RealDrewKlayman Thank you! I don't think this is an issue we can address in the js library, it seems to be due to how we host NextJS apps so I will transfer this issue over to the console team.

[victorccccc]

Hi, unfortunately, we don't support forwarding these headers to your target server (reverse proxy) from Amplify managed distribution at the moment. According to https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/RequestAndResponseBehaviorCustomOrigin.html#request-custom-headers-behavior, CloudFront removes some request headers while processing the request.

I'll mark this as a feature request: Custom request header in our backlog, thanks for your understanding

[github-actions[bot]]

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