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

/config/index.jsconst dev = process.env.NODE_ENV !== 'production';导出常量服务器 = 开发?'http://localhost:3000' : 'https://your_deployment.server.com';products.jsimport { server } from '../config';//...Products.getInitialProps = 异步函数(){const res = await fetch(`${server}/api/products`)const 数据 = 等待 res.json()控制台日志(数据)console.log(`显示的数据已获取.计数 ${data.length}`)返回 {产品:数据}}I'm using express as my custom server for next.js. Everything is fine, when I click the products to the list of productsStep 1: I click the product LinkStep 2: It will show the products in the database.However if I refresh the /products page, I will get this ErrorServer 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)})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 解决方案 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.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.jsconst dev = process.env.NODE_ENV !== 'production';export const server = dev ? 'http://localhost:3000' : 'https://your_deployment.server.com';products.jsimport { 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 - 错误:仅支持绝对网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！