如何从Sanity到React获取数据?

时间:2019-08-07 14:04:32

标签: reactjs cors sanity

我很难理解如何从理智的角度获取数据。我已经阅读了文档,但仍然感到困惑。

我尝试仅将数据记录到控制台,但是它给我一个错误,例如“所请求的资源上没有'Access-Control-Allow-Origin'标头。”

import React from "react";
import sanityClient from "@sanity/client";

const Post = () => {
  const client = sanityClient({
    projectId: "6sf5fafo",
    dataset: "production",
    useCdn: true
  });
// fetching the data
  client
    .fetch('*[__type == "post"][0]{title, "name": author->name}', {})
    .then(res => {
      console.log("Post info: ", res); // Here is when i tried to log the data but gets an error message.
    })
    .catch(err => {
      console.log(err);
    });
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
};
export default Post;

有人可以对我的代码进行一些编辑以正确地从理智的角度获取数据吗?

1 个答案:

答案 0 :(得分:1)

您收到此错误,因为Sanity拒绝来自未知浏览器来源的访问。默认情况下(生成新项目时),唯一允许的来源是http://localhost:3333。您可以授予对其他任何来源的访问权限。

假设您正在https://studio.mysite.com上运行Content Studio,并希望授予对该URL的访问权限。有两种方法可以做到这一点:

  1. 打开终端,将目录切换到保存Studio源代码的位置,然后键入:
sanity cors add https://studio.mysite.com
  1. 转到项目设置,然后通过Web UI添加原点。由于您的projectId为6sf5fafo,因此可以在https://manage.sanity.io/projects/6sf5fafo/settings/api上找到这些设置

有关健全性和CORS的更多信息,请参阅https://www.sanity.io/docs/front-ends/cors上的文档