Error: only absolute urls are supported

[ccorcos]

How can I specify what url to use based on the environment being development or production?

I'm basically using the same server as a proxy

app.prepare()
.then(() => {
  const server = express()
  server.use(morgan(dev ? 'dev' : 'common'))
  server.use(bodyParser.json({limit: '50mb'}))

  server.get('/posts', (req, res) => {
    db.list('Posts', {
      pageSize: 10,
      fields: ['Name', 'Date Published'],
      cursor: req.query.cursor,
    })
    .then(result => res.json(result))
  })

So I'm trying to make a fetch to the root domain, but I cant get it to work.

export default class extends React.PureComponent {
  static async getInitialProps() {
    console.log(process.env)
    const response = await fetch('/posts')
    const data = await response.json()
    return { data }
  }
  render() {
    console.log(this.props)
    return (
      <div>
        hello {this.props.data}
      </div>
    )
  }
}

[eezing]

Yea, when fetching server side, it appears we need to define the full URL. I did this:

static getInitialProps ({ req }) {
  const baseUrl = req ? `${req.protocol}://${req.get('Host')}` : '';
  const response = await fetch(baseUrl + '/posts');
}

[rauchg]

Error: only absolute urls are supported

This is a good thing! How else would fetch know where to go on the server?

[arunoda]

I think this is something we can't change. You need to define the full URL.
Defining something like API_URL and setting it via some env variable is a pretty good thing to do.

[ccorcos]

@eezing has a nice solution that worked.

[timneutkens]

@eezing @ccorcos I wonder if this is vulnerable to an attack. SInce the host header is provided by the client, not the server.
http://www.skeletonscribe.net/2013/05/practical-http-host-header-attacks.html

[ccorcos]

Interesting.

[eezing]

@timneutkens @ccorcos Thanks for bringing this up. Yes, the Host header is vulnerable to spoofing, but it may not be a cause for concern depending on your host provider.

In my case, my cloud hosting provider's proxy routes requests based on Host request header, which in theory makes it impossible for a client to be on my site and have the Host header be something different.

The behavior can be confirmed using Postman or curl (allows you to define Host header).

Does this make sense or am I missing something? Thoughts? In any case I should have dropped a disclaimer with my original post.

[timneutkens]

@eezing yeah it would be quite impossible to do that on now also, just wanted to drop it in, since if you go hosting it yourself it would be vulnerable 😉

[ccorcos]

yeah, definitely something to consider!