fix: issue where http requests were incorrectly determined as https

client/pages/Home/Home.tsx

@@ -22,6 +22,7 @@ import { Favicon } from "../../components/Favicon";
 import { createIsomorphLink } from "../../../lib/apollo/links";
 import { GetServerSideProps } from "next";
 import absoluteUrl from "next-absolute-url";
+import { getOrigin } from "../../../lib/get-origin";
 
 interface Props {
   initialCategories?: FullCategoryFragment[];
@@ -206,7 +207,7 @@ export function Home({
 }
 
 export const getServerSideProps: GetServerSideProps = async ({ req }) => {
-  const { origin } = absoluteUrl(req);
+  const origin = getOrigin(req);
   const apolloClient = createApolloClient({
     links: [createIsomorphLink(origin)],
   });

lib/get-origin.tsx

@@ -0,0 +1,15 @@
+import type { IncomingMessage } from "http";
+
+export const getOrigin = (req?: IncomingMessage) => {
+  let host = req?.headers ? req.headers.host : window.location.host;
+
+  if (
+    req &&
+    req.headers["x-forwarded-host"] &&
+    typeof req.headers["x-forwarded-host"] === "string"
+  ) {
+    host = req.headers["x-forwarded-host"];
+  }
+  const protocol = req?.headers.referer?.split("://")?.[0] ?? "http";
+  return `${protocol}://${host}`;
+};

pages/_app.tsx

@@ -7,6 +7,7 @@ import React, { useMemo } from "react";
 import { Fonts, GlobalFontStyles } from "../client/styles/fonts";
 import { createIsomorphLink } from "../lib/apollo/links";
 import absoluteUrl from "next-absolute-url";
+import { getOrigin } from "../lib/get-origin";
 
 interface MyAppProps extends AppProps {
   origin: string;
@@ -33,8 +34,9 @@ function MyApp(opts: MyAppProps) {
 }
 
 MyApp.getInitialProps = async (appContext: AppContext) => {
-  const { origin } = absoluteUrl(appContext.ctx.req);
+  const req = appContext.ctx.req;
   const appProps = await App.getInitialProps(appContext);
+  const origin = getOrigin(req);
   return {
     ...appProps,
     origin,