The latest changes for parsing x-forwarded-host and x-forwarded-proto are not released to npm

I'm running into this error when I try to add this via npm as a package, as well as tried the guide on https://codeconqueror.com/blog/get-the-current-url-in-next-js listed in the README.

Since the npm package wasn't working for me, the following is from the guide to manually troubleshoot it. From what I understand, it should be checking for 'req' under the host variable in the absolute-url file, else do 'window.location.host' but not having much luck.

I'm new to React/Next.js so it's probably something simple I overlooked but would be appreciative if someone can look at this.

// PROJECT/lib/absolute-url.js

function absoluteUrl(req, setLocalhost) {
  let protocol = 'https:'
  let host = req
    ? req.headers['x-forwarded-host'] || req.headers['host']
    : window.location.host

  if (host.indexOf('localhost') > -1) {
    if (setLocalhost) host = setLocalhost
    protocol = 'http:'
  }

  return {
    protocol: protocol,
    host: host,
    origin: protocol + '//' + host,
  }
}

// PROJECT/components/layout.js

import absoluteUrl from '../lib/absolute-url'

const { protocol, host } = absoluteUrl(req, 'localhost:3000')

export default function Layout({ children, pageTitle, description, ...props }) {
  return (
    <>
      <CONTENT>
    </>
  )
}

Hi,

I'm trying to use next-absolute-url on Google App Engine and it seems the URL returned by absoluteUrl used into initialProps is always http://localhost:3000 . On localhost for the same call I have the good host value.

Here my sample code :

App.getInitialProps = ({ ctx }: AppContext) => {
  const { protocol, host } = absoluteUrl(ctx.req);
  return {
    pageProps: {
      domain: protocol + "//" + host,
    },
  };
};
export default App;

Cannot read property 'indexOf' of undefined
TypeError: Cannot read property 'indexOf' of undefined
    at absoluteUrl (/node_modules/next-absolute-url/index.js:4:12)

I tried both the 2 param and the 1 param version

I think that line should be changed to:

  var host = req ? (req.headers['x-forwarded-host'] || req.headers['host']) : window.location.host;

so it grabs host if x-forwarded-host is not set.

Hi,
I found that using absoluteUrl in the client-side returns the host without the port information. In my case, it is returning localhost, although it should be localhost:3000.
I think the solution would be changing window.location.hostname to window.location.host

E.g.,

I don't use https for my staging server and the calls there fail because the protocol is always https if the host isn't localhost. How can we fix this? Should it read the protocol from window.location if window is available?

The absoluteUrl function returns only http as protocol if host is 'localhost'.
In case of '127.0.0.1' it always returns https.
In some cases we have to use 127.0.0.1 instead of localhost, but that mixes up protocols returned by absoluteUrl.

I published this module before now dev was released.
Since now dev is actually being used, it might be time to update this module. But what updates are needed?

#1 is a great suggestion to check req.headers['x-forwarded-host']

The docs can definitely be updated to better compliment the now dev experience.

I'm open to suggestions, issues, and pull request :)

I'm getting ReferenceError: window is not defined when I try to use this module in getInitialProps.
I need to do a fetch for my context data, but I can't hard-code the url - hence looking to use next-absolute-url. But this is failing.

import fetch              from 'isomorphic-unfetch';
import absoluteUrl        from 'next-absolute-url';

export default class MyApp extends App {
  static async getInitialProps(ctx) {
    const { origin } = absoluteUrl(ctx.req);
    console.log('origin', origin);
  }
  render() {
    // etc
  }
}

ReferenceError: window is not defined

export const getStaticProps: GetStaticProps<IProps> = async ({req}) => {
  59 | 
> 60 | const { origin } = absoluteUrl(req);
     |                               ^
  61 | const apiURL = `${origin}/api/job.js`;
  62 | console.log(origin);

Hi,

When the following code runs on client side on a remote machine; absoluteUrl returns https despite that the app is just normal http.

const {origin} = absoluteUrl(req)
const p1 = ${origin}/api/vehicles
console.log('absoluteUrl returned: ' + p1)
const p2 = window.location.protocol + '//' + window.location.hostname + (window.location.port ? ':' + window.location.port: '') + '/api/vehicles'
console.log('window returned: ' + p2)

Not sure because of index.js line 14 :
var protocol = /^localhost(:\d+)?$/.test(host) ? 'http:' : 'https:'

Strange enough, if the next.js app runs on localhost then everything seems fine.

Opening this issue so I don't forget. It might be a good idea to use req.headers['x-forwarded-host'] as now dev serves local lambda functions from a different port.

Original discussion: https://spectrum.chat/zeit/general/an-unexpected-error-has-occurred-serverless-next-js~270a120a-5c88-47e0-b7d9-a4ddf4611886

next-absolute-url is starting to gain increased usage 🎉 💯

• npm weekly downloads: 4,903
• used by: 91 public repos
• used by: 12 npm packages

Small numbers, but the trend is going upwards 📈

I'd love to update the README.md with better documentation, such as a full example of it being used in a Next.js page ✍️

However, I don't have a ton of extra time on my hands at the moment. If anyone would like to help, I would be extremely joyous and grateful. ⏳