Integrating Notion API with React: Best practices and CORS issues

Other Questions Notion
1

Struggling with Notion API in my React project

I’m building a personal website using React and want to use Notion API as my CMS. But I’m hitting a roadblock with CORS issues when trying to make API calls directly from React using Axios.

I’m not sure what’s the best approach here. Should I set up an Express.js backend? It feels like overkill since I only need to read pages and blocks, not edit them.

Here’s a sample of what I’ve tried:

function fetchNotionData(pageId) {
  const options = {
    method: 'GET',
    url: `https://api.notion.com/v1/blocks/${pageId}/children`,
    params: { page_size: 100 },
    headers: {
      'Authorization': 'Bearer MY_SECRET_KEY',
      'User-Agent': 'MyApp/1.0'
    }
  };

  axios(options)
    .then(response => console.log(response.data))
    .catch(error => console.error('Error:', error));
}

I’m pretty new to backend stuff, so I’m not sure if using a server is absolutely necessary here. Any advice on the best way to handle this would be super helpful. Thanks!

2

Having worked with the Notion API in React projects, I can confirm that CORS issues are common when making direct API calls. While setting up a backend might seem daunting, it’s often the most secure and flexible solution.

Consider using a lightweight Node.js server with Express. It doesn’t have to be complex - just enough to proxy your API requests and handle authentication. This approach keeps your secret key safe and gives you more control over data processing.

Alternatively, explore serverless options like Vercel’s API routes if you’re using Next.js, or Netlify Functions. These can provide a good middle ground between direct API calls and a full backend setup.

Remember, investing time in a proper architecture now can save you significant trouble as your project grows. It’s worth the initial effort for better security and scalability.

3

yo mike, been there done that. notion api can be a pain. instead of express, try using netlify functions. it’s way easier to set up and handles the CORS stuff for you. just create a simple function to make the api call, deploy it, and boom - you’re good to go. no need for a full backend. keep it simple, man!

4

I’ve been in your shoes, Mike. Integrating Notion API with React can be tricky, especially when you’re new to backend development. From my experience, setting up a small backend server is often the best approach, even if it seems like overkill at first.

Here’s why: Notion’s API requires authentication, and you don’t want to expose your secret key in the client-side code. A backend server acts as a secure middleman, handling the API calls and protecting your credentials.

I’ve found that using something like Express.js with Node.js is relatively straightforward and doesn’t add much complexity. You can set up a simple server that proxies your Notion API requests, handles CORS, and keeps your secret key safe.

If you’re hesitant about diving into backend development, another option is to use serverless functions (like AWS Lambda or Netlify Functions). They can handle API requests without needing a full-fledged server.

Remember, while it might seem like extra work now, this approach will save you headaches down the line, especially if you decide to expand your site’s functionality. Good luck with your project!