Leveraging React to Access the Notion API

Other Questions Notion
1

Facing CORS issues when using React and Axios to query the Notion API. Is a lightweight Node proxy the best remedy?

const retrieveData = (blockId) => {
  const options = {
    method: 'GET',
    url: `https://api.notion.com/v1/blocks/${blockId}/children?page_size=50`,
    headers: { 'Authorization': 'YOUR_TOKEN', 'X-Notion-Version': '2022-06-28' }
  };
  axios(options)
    .then((res) => console.log(res.data))
    .catch((err) => console.error(err));
};
2

Based on previous experience, managing CORS issues with a lightweight Node proxy has proven to be a reliable solution. Deploying a small Express server typically resolves CORS complications by acting as a backend intermediary, ensuring that API tokens remain secure and API calls are handled server-side. I also experimented with serverless functions, and while they offer scalability and ease of deployment, a dedicated Node proxy was simpler to set up and maintain in smaller projects. Evaluate your project requirements, as the feasibility of each approach may vary depending on complexity and security considerations.

3

After struggling a bit with the Notion API and CORS issues using React, I eventually opted for a Node proxy and found that it was a solid approach. While it initially seemed like an extra step in my development workflow, having that intermediary layer actually simplified debugging and improved security by keeping the token hidden. Over time, I’ve also recognized the benefits of centralized error handling and request logging in a Node environment. This extra control has saved me time and reduced issues on production builds in several projects.