Next.js - 错误：仅支持绝对网址

Question

我使用 express 作为 next.js 的自定义服务器。一切都很好，当我单击产品到产品列表时

第 1 步：我点击产品链接

第 2 步：它将显示数据库中的产品。

但是，如果我刷新 /products 页面，我会收到此错误

服务器代码（看 /products 端点）

 app.prepare()
.then(() => {
  const server = express()

  // This is the endpoints for products
  server.get('/api/products', (req, res, next) => {
    // Im using Mongoose to return the data from the database
    Product.find({}, (err, products) => {
      res.send(products)
    })
  })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(3000, (err) => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})
.catch((ex) => {
  console.error(ex.stack)
  process.exit(1)
})

页面 - products.js（将循环产品 json 数据的简单布局）

 import Layout from '../components/MyLayout.js'
import Link from 'next/link'
import fetch from 'isomorphic-unfetch'

const Products = (props) => (
  <Layout>
    <h1>List of Products</h1>
    <ul>
      { props.products.map((product) => (
        <li key={product._id}>{ product.title }</li>
      ))}
    </ul>
  </Layout>
)

Products.getInitialProps = async function() {

  const res = await fetch('/api/products')
  const data = await res.json()

  console.log(data)
  console.log(`Showed data fetched. Count ${data.length}`)

  return {
    products: data
  }
}

export default Products

原文由 sinusGob 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如错误所述，您必须为正在制作的 fetch 使用绝对 URL。我假设它与可以执行代码的不同环境（客户端和服务器）有关。在这种情况下，相对 URL 不够明确和可靠。

解决此问题的一种方法是将服务器地址硬编码到您的 fetch 请求中，另一种方法是设置一个对您的环境做出反应的 config 模块：

/config/index.js

 const dev = process.env.NODE_ENV !== 'production';

export const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com';

产品.js

 import { server } from '../config';

// ...

Products.getInitialProps = async function() {

  const res = await fetch(`${server}/api/products`)
  const data = await res.json()

  console.log(data)
  console.log(`Showed data fetched. Count ${data.length}`)

  return {
    products: data
  }
}

原文由 Fabian Schultz 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

与 @Shanker 的回答 类似，但如果您不想为此安装额外的软件包，请按以下步骤操作。

 async getInitialProps({ req }) {
    const protocol = req.headers['x-forwarded-proto'] || 'http'
    const baseUrl = req ? `${protocol}://${req.headers.host}` : ''

    const res = await fetch(baseUrl + '/api/products')
}

原文由 bubbleChaser 发布，翻译遵循 CC BY-SA 4.0 许可协议