如何将 React + Sanity 应用程序部署到 Netlify

Question

我目前正在开发一个使用 React 和 Sanity.io 构建的 Portfolio Web 应用程序。 部署到 Netlify 后，Sanity 中的所有内容都没有显示。

请问，我做错了什么？

我注意到我在控制台中收到此错误消息：

Access to XMLHttpRequest at 'https://lyg8hs82.apicdn.sanity.io/v2022-02-01/data/query/denscholar?query=*%5B_type%20%3D%3D%20%22works%22%5D' from origin 'http://localhost:3001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我的 clien.j 文件中的代码

export const client = sanityClient({
    projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
    dataset: 'denscholar',
    useCdn: true,
    apiVersion: '2022-02-01',
    token: process.env.REACT_APP_SANITY_TOKEN

})

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source)

Answer 1

我猜您没有向新部署的网站添加 CORS Origin。

在这里执行以下步骤：

第一次去你的理智项目。 然后转到您的 API 设置。 在那里您可以添加新部署的 URL

点击“添加CORS Origin”后

输入新部署站点的 url。

之后，尝试重新加载部署的网站。 这次你不应该得到任何错误。

很高兴这有帮助。