本地开发React应用调用Notion.so API持续触发CORS错误求助

问题背景 #

基于Notion开发博客应用时，用Insomnia测试API完全正常，但在React-Redux的RTK Query中调用首个请求时触发CORS错误。已尝试CORS Chrome插件、CRA代理、Express代理等方案，耗时5小时仍未解决。

核心原因 #

Notion API不支持浏览器端直接调用——它的服务器没有配置允许前端Origin的Access-Control-Allow-Origin响应头。Insomnia这类工具属于服务器端请求，不受浏览器的CORS策略限制，所以能正常请求；而前端代码在浏览器中发起的请求会被CORS拦截。

可行解决方案 #

1. 正确配置后端代理（推荐方案）

之前的Express代理可能配置有误，以下是完整的可运行配置：

后端代理代码（Express）

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
require('dotenv').config();

const app = express();

// 代理Notion API请求
app.use('/notion-proxy', createProxyMiddleware({
  target: 'https://api.notion.com/v1',
  changeOrigin: true,
  pathRewrite: { '^/notion-proxy': '' }, // 移除前端请求的前缀
  onProxyReq: (proxyReq) => {
    // 注入Notion认证头和版本头（存在后端环境变量，避免前端泄露密钥）
    proxyReq.setHeader('Authorization', `Bearer ${process.env.NOTION_SECRET}`);
    proxyReq.setHeader('Notion-Version', '2022-02-22');
  }
}));

app.listen(5000, () => console.log('代理服务运行在端口5000'));

修改前端RTK Query配置

export const notionApi = createApi({
  reducerPath: "notionApi",
  baseQuery: fetchBaseQuery({
    baseUrl: "http://localhost:5000/notion-proxy", // 指向代理服务地址
    // 此处不再设置Authorization和Notion-Version，由代理统一处理
  }),
  endpoints: builder => ({
    getMenu: builder.query({
      query: id => `/blocks/${id}/children`
    })
  })
});

export const { useGetMenuQuery } = notionApi;

关键注意事项：绝对不要把Notion Secret暴露在前端代码中（哪怕是React环境变量），前端环境变量会被打包进静态文件，极易泄露，必须存在后端环境变量里。

2. 排查之前代理失效的原因

• CRA默认代理：仅支持简单请求，Notion API需要携带自定义头，属于复杂请求，默认proxy无法处理，需手动创建src/setupProxy.js配置http-proxy-middleware。
• CORS Chrome插件：Notion服务器可能会校验请求头的合法性，插件修改的CORS头会被服务器拒绝，因此无法绕过限制。

3. 修复代码小细节

你的代码中Notion-Version值前面有多余空格：" 2022-02-22"，虽然这不是CORS错误的核心原因，但建议去掉空格，改为"2022-02-22"避免潜在问题。

内容的提问来源于stack exchange，提问作者Elvin Huseynov