Next.js-错误:仅支持绝对网址 [英] Next.js - Error: only absolute urls are supported

问题描述

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

I'm using express as my custom server for next.js. Everything is fine, when I click the products to the list of products

第1步:我点击产品链接

第2步:它将在数据库中显示产品.

Step 2: It will show the products in the database.

但是，如果刷新/products页面，则会出现此错误

However if I refresh the /products page, I will get this Error

服务器代码(查看/products端点)

Server code (Look at /products endpoint)

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数据的简单布局)

Pages - products.js (Simple layout that will loop the products json data)

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

推荐答案

由于错误状态，您必须对要创建的fetch使用绝对URL.我假设它与可以在其上执行代码的不同环境(客户端和服务器)有关.相对网址不是明确的&在这种情况下足够可靠.

As the error states, you will have to use an absolute URL for the fetch you're making. I'm assuming it has something to do with the different environments (client & server) on which your code can be executed. Relative URLs are just not explicit & reliable enough in this case.

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

One way to solve this would be to just hardcode the server address into your fetch request, another to set up a config module that reacts to your environment:

/config/index.js

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

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

products.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
  }
}

这篇关于Next.js-错误:仅支持绝对网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！