web-dev-qa-db-ja.com

Next.js-エラー：絶対URLのみがサポートされています

Next.jsのカスタムサーバーとしてexpressを使用しています。製品のリストにある製品をクリックすると、すべてが順調です

ステップ1：製品のリンクをクリックします

enter image description here

ステップ2：データベース内の製品を表示します。

enter image description here

ただし、/productsページ、このエラーが発生します

enter image description here

サーバーコード（/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
reactjsreact-reduxnext.js
8
sinusGob

エラーが示すように、作成しているfetchには絶対URLを使用する必要があります。私は、コードを実行できるさまざまな環境（クライアントとサーバー）と関係があると思います。この場合、相対URLは明示的ではなく、十分に信頼できません。

これを解決する1つの方法は、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
  }
}
23
Fabian Schultz

ケース1.エラーではありません。 isomorphic-unfetchはSSRモードで実行されているため、バックエンドはブラウザーの設定を認識していないため、Node.jsはそこからフェッチする絶対URLを知る必要があります。

ケース2.別のシナリオは、httpホストポイズニングヘッダー攻撃を防ぐことです。

それを含むリンクに秘密鍵とトークンを追加します。

<a href="http://_SERVER['Host']?token=topsecret">  (Django, Gallery, others)

....スクリプトを直接インポートすることもできます。

<script src="http://_SERVER['Host']/misc/jquery.js?v=1.4.4">

ケース3. isomorphic-unfetchデータをフェッチするために使用するライブラリです。これはブラウザフェッチAPIのシンプルな実装ですが、クライアント環境とサーバー環境の両方で機能します。

それについてもっと読む：

  1. 同形のアンフェッチ-クライアントとサーバーのアンフェッチとノードフェッチを切り替えます
  2. httpホストヘッダー攻撃を防止
  3. ページのデータの取得
1
Francis Rodrigues