Next.js - 错误:仅支持绝对URL

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)
})

Pages - 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

Answer 1

与@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')
}

Answer 2

正如错误所述,您将不得不使用绝对URL fetch.我假设它与您的代码可以在其上执行的不同环境(客户端和服务器)有关.在这种情况下,相对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';

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

Answer 3

这听起来很愚蠢，但值得一提。如果您在 Web 应用程序中使用 SSR，则 fetch 调用将在客户端上使用相对链接，但在服务器上将失败。只有服务器需要绝对链接！

如果你想阻止服务器发出请求，只需将其包装在逻辑中

if(global.window){
   const req = fetch('/api/test');
   ...
}

Answer 4

这个简单的解决方案对我有用，无需添加额外的配置文件，

安装

npm install --save next-absolute-url

用法

import absoluteUrl from "next-absolute-url";

async getInitialProps({ req }){
  const { origin } = absoluteUrl(req, req.headers.host);
  console.log('Requested URL ->',origin); 
  // (or) other way
  const host = absoluteUrl(req, req.headers.host);
  console.log('Requested URL ->',host.origin); 
}

Answer 5

如果您的项目托管在支持它的提供商上，您可以使用环境变量。

本地环境

// Local
URL="http://localhost:3000"

// Production
URL="https://prod.com"

然后你可以使用以下内容。

const { URL } = process.env;
const data = await fetcher(URL + '/api');