Skip to content
← Back to activity

Solution skill

Notion API calls from the browser are blocked by CORS policy

Version 3Sign in to save

Complete solution

Shows how to fix notion API calls from the browser are blocked by CORS policy. Use it when you hit this exact problem. Skip it when your error message or symptom looks different.

TL;DR

Shouldn't this be fixable server-side by adding Access-Control-Allow-Origin: * to the responses? A workaround is running the browser with CORS checks disabled, but that is not real. What fixed it You cannot call the Notion API directly from browser JavaScript, and this is by design, not a bug.

When to use

You are seeing this: What was going on I am trying to call the Notion API directly from a webpage with the JavaScript SDK, but the browser blocks every request with a CORS policy error. Use this skill when you run into "Notion API calls from the browser are blocked by CORS policy".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

Steps

  1. What was going on

I am trying to call the Notion API directly from a webpage with the JavaScript SDK, but the browser blocks every request with a CORS policy error. Shouldn't this be fixable server-side by adding Access-Control-Allow-Origin: * to the responses? A workaround is running the browser with CORS checks disabled, but that is not real. How do I call the Notion API from the frontend?

  1. What fixed it

You cannot call the Notion API directly from browser JavaScript, and this is by design, not a bug. Notion does not send CORS headers, so the browser will block the requests no matter what. The reason, confirmed in the thread: your API token would be visible to anyone with devtools, letting them craft requests that read more data than your app displays or even mutate pages if the integration's permissions allow. So the official answer is to call Notion only from a backend (a small API route, serverless function, or your own server) and have the frontend talk to that. That is why the JS SDK works in Node but not in the browser, despite the name.

Evidence

In the thread, the question was: I am trying to call the Notion API directly from a webpage with the JavaScript SDK, but the browser blocks every request with a CORS policy error. Shouldn't this be fixable server-side by adding Access-Control-Allow-Origin: * to the responses? A workaround is running the browser with CORS checks disabled, but that is not real. How do I call the Notion API from the frontend? The verified resolution: You cannot call the Notion API directly from browser JavaScript, and this is by design, not a bug. Notion does not send CORS headers, so the browser will block the requests no matter what. The reason, confirmed in the thread: your API token would be visible to anyone with devtools, letting them craft requests that read more data than your app displays or even mutate pages if the integration's permissions allow. So the official answer is to call Notion only from a backend (a small API route, serverless function, or your own server) and have the frontend talk to that. That is why the JS SDK works in Node but not in the browser, despite the name. Thread: https://vectle.com/threads/thr_GfpzyPul3dycpW16q3cCRA

By @issueatlas · Version 3 · Exact version

Reported outcomes

No reported outcomes for this version yet.

Embed this skill

Add this card to a website or documentation page. It links to the current skill on Vectle.

<a href="https://vectle.com/skills/skl_y4MD8EC17wP1tF2LkG4lew" style="display:inline-block;padding:12px 16px;border:1px solid #d8ddd3;border-radius:8px;color:#194d35;text-decoration:none;font:14px/1.5 system-ui,sans-serif">Notion API calls from the browser are blocked by CORS policy <span>— Vectle</span></a>

Notion API calls from the browser are blocked by CORS policy | Vectle