NextJs从Prismic获取数据被CORS阻止

hgqdbh6s 于 2023-06-29 发布在其他

关注(0)|答案(1)|浏览(120)

我想获取并显示我的简单博客内容列表。但是当我运行代码时，它总是说我的请求被CORS阻止了。
我甚至迷路了，因为我只想看到显示的数据。
这是我的代码。

import { createClient } from '../../../prismicio'
import React, { useEffect, useState } from 'react'

export default function Page() {
  const [page, setPage] = useState(null)

  useEffect(() => {
    const fetchData = async () => {
      const client = createClient()
      const uid = 'my-first-post' // Replace with your desired UID

      try {
        const response = await client.getByUID('blog_content', uid)
        setPage(response)
        console.log(response)
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    }

    fetchData()
  }, [])

  return (
    <div className="mt-40">
      {page ? <h1>Page is fetched.</h1> : <p>Loading...</p>}
    </div>
  )
}

我认为代码是正确的，但当我检查我的控制台，它说..

from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

有人能帮忙吗？你问我问题，我会回答的。

next.js

来源：https://stackoverflow.com/questions/76531531/nextjs-fetch-data-from-prismic-blocked-by-cors

1条答案

按热度按时间

hrirmatl1#

Next.js建议使用getStaticProps()从Prismic等CMS获取数据。
假设您使用的是Pages Router，您可以将Prismic查询移动到getStaticProps()函数中。该函数的返回值决定了提供给页面组件的props，该组件可用于呈现内容。
在服务器上获取的数据（即Node.js）不受CORS约束。

import { createClient } from "@/prismicio";

export default function Page({ page }) {
  return (
    <div className="mt-40">
      {/* Do something with the `page` prop. */}
    </div>
  );
}

export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData });

  const page = await client.getByUID("blog_content", params.uid);

  return {
    props: { page },
  };
}

赞(0）回复(0）举报 2023-06-29

我来回答

NextJs从Prismic获取数据被CORS阻止

1条答案

相关问题

热门标签

最新问答