使用无服务器React应用调用Notion API时如何避免CORS错误

开发者阿泽

2026-10-10

问题解决说明

核心问题

Notion 官方API默认不允许来自浏览器的跨域请求，该限制由Notion服务端的CORS配置决定，前端调整任何请求头都无法直接解决该问题，所有从浏览器直接发往Notion API的请求都会被同源策略拦截。

可行解决方案

你正在开发无服务器React应用，最适配的方案是新增无服务器函数做请求中转：

新增无服务器中转函数（支持Vercel Functions、Netlify Functions、Cloudflare Workers等常见无服务器平台），所有Notion API请求先发送到该中转函数，由函数侧发起对Notion API的请求，再将结果返回给前端。服务端发起的请求不存在CORS限制，你只需要给中转函数配置允许你前端域名访问的CORS头即可。
代码示例（Vercel Functions场景）：

// pages/api/notion-proxy.js
export default async function handler(req, res) {
  // 配置允许前端访问的CORS头
  res.setHeader('Access-Control-Allow-Origin', 'https://你的react应用域名.com');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  // 处理预检请求
  if (req.method === 'OPTIONS') {
    return res.status(200).end();
  }

  // 转发请求到Notion API
  const response = await fetch(`https://api.notion.com/v1${req.url}`, {
    method: req.method,
    headers: {
      'Authorization': `Bearer ${process.env.NOTION_API_KEY}`,
      'Notion-Version': '2022-06-28',
      'Content-Type': 'application/json'
    },
    body: req.method !== 'GET' ? JSON.stringify(req.body) : undefined
  });

  const data = await response.json();
  res.status(response.status).json(data);
}