javascript 如何使用React使用Notion API

mctunoxg  于 2023-03-21  发布在  Java
关注(0)|答案(3)|浏览(212)

我试图使用新的概念API作为我个人网站的CMS。作为改进的一种方式,我试图将其与React一起使用。但似乎它不允许CORS(我使用Axios)。
使用这个API的最佳方式是什么?使用Express.JS后端?我认为这对我的使用来说是多余的(我只想读取页面和块,而不是编辑)。
下面是我实际的API调用,但来自React:

const getPages = (apiCmsPage) => {
    var config = {
        method: 'get',
        url: 'https://api.notion.com/v1/blocks/'+ apiCmsPage +'/children?page_size=100',
        headers: { 
          'Authorization': KEY,
          'User-Agent' : 'PostmanRuntime/7.26.8'
        }
      };
      
      axios(config)
      .then(function (response) {
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        console.log(error);
      });
      
}

事实上,我从来没有真正体验过后端,所以我不知道它是否真的有义务使用API。
谢谢。

vjrehmav

vjrehmav1#

我通过Next.js解决了这个问题。
我尝试了官方的notion-sdk-js,但仍然不能解决这个问题,因为它可能是针对服务器而不是客户端的。
通过使用Next.js的getServerSideProps,可以在每次客户端请求之前通过fetch获取Notion数据,然后直接将渲染后的页面返回给客户端。由于请求在服务器端完成,因此不存在CORS问题。但代价是你必须在后台保留一个Next.js进程来渲染页面。

qrjkbowd

qrjkbowd2#

你会考虑使用像NextJS这样的react框架吗?你可以使用它的SSG功能在构建时生成页面,其中你的凭据在客户端是不可见的。
https://nextjs.org/docs/basic-features/data-fetching#getstaticprops-static-generation
Notion还有一个官方的js sdk,所以你不必做所有API调用的艰苦工作:
https://github.com/makenotion/notion-sdk-js

enxuqcxy

enxuqcxy3#

使用notion sdk -〉https://github.com/makenotion/notion-sdk-js,它提供了与notion weather客户端或服务器端交互的所有功能。

相关问题