英文:
NextJs Fetch Data from Prismic blocked by CORS
问题
我想在简单的博客上获取和显示我的内容列表。但是当我运行代码时，它总是说我的请求被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' // 用你想要的UID替换
try {
const response = await client.getByUID('blog_content', uid)
setPage(response)
console.log(response)
} catch (error) {
console.error('获取数据时出错:', error)
}
}
fetchData()
}, [])
return (
<div className="mt-40">
{page ? <h1>页面已获取。</h1> : <p>加载中...</p>}
</div>
)
}
我认为代码是正确的，但当我检查控制台时，它显示了以下错误消息。
来自origin 'http://localhost:3000' 的请求已被CORS策略阻止：所请求的资源上没有'Access-Control-Allow-Origin'标头。
有人可以帮忙吗？
向我提问，我会回复的。
英文:
I want to fetch and display lists of my content on simple blog. But when I run the code, it always says that my request has been blocked by a CORS.
I'm even lost because I just want to see the data displayed.
This is my code.
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>
)
}
I think the code is correct, but when I check my console, it says..
from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Can anyone please help?
Ask me questions and I'll respond to it.
答案1
得分: 2
Next.js 建议使用 getStaticProps() 从像 Prismic 这样的 CMS 获取数据。
假设您正在使用 页面路由器，您可以将 Prismic 查询移到 getStaticProps() 函数中。该函数的返回值确定提供给您的页面组件的 props，可以用于呈现您的内容。
在服务器上获取的数据（即 Node.js）不受 CORS 限制。
import { createClient } from "@/prismicio";
export default function Page({ page }) {
return (
<div className="mt-40">
{/* 使用 `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 },
};
}
英文:
Next.js recommends fetching data from a CMS like Prismic using getStaticProps().
Assuming you are using the Pages Router, you can move your Prismic query into a getStaticProps() function. The return value of that function determines the props provided to your page component, which can be used to render your content.
Data fetched on the server (i.e. Node.js) is not subject to 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 },
};
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论