Timeline

• Elon Musk (@elonmusk) 2025-07-31 01:13:00.009307026 +0800 CST
  

  OpenAI 和 Anthropic 的 API 之所以没有设置 CORS（跨域资源共享），是因为它们并不打算让浏览器直接调用这些 API，而是明确设计为“后端到后端”的服务。

  ---

  ✅ 核心原因：安全与架构设计

  1. 防止密钥泄露

  • 如果你在浏览器里直接调用 OpenAI 或 Anthropic 的 API，就必须把 API Key 暴露在前端代码里。
  • 这意味着任何人都可以打开浏览器开发者工具，拿到你的密钥，滥用你的账户。
  • 这是严重的安全隐患，所以他们干脆不允许浏览器直接访问。

  2. CORS 是浏览器的限制，不是服务器的限制

  • CORS 是浏览器为了用户安全而设置的机制。
  • 服务器（如 OpenAI）可以选择是否返回 Access-Control-Allow-Origin 头来允许跨域。
  • OpenAI 和 Anthropic 故意不返回这个头，从而阻止浏览器直接访问。

  3. 官方推荐：通过后端代理

  • 正确的做法是：
    • 前端 → 你的后端服务器（如 Node.js、Python Flask、Next.js API route）
    • 你的后端 → OpenAI / Anthropic API
  • 这样 API Key 就安全地保存在服务器上，前端不会暴露密钥。

  ---

  ✅ 举个例子

  ❌ 错误做法（浏览器直接调用）：

  // 浏览器里直接调用，会报错：CORS blocked
  fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': 'Bearer sk-xxx', // 暴露密钥！
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ model: 'gpt-3.5-turbo', messages: [...] })
  });
  

  ✅ 正确做法（通过后端代理）：

  // 前端调用你自己的后端
  fetch('/api/openai', {
    method: 'POST',
    body: JSON.stringify({ messages: [...] })
  });
  

  // 后端（如 Next.js API route）安全地调用 OpenAI
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`, // 安全
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ model: 'gpt-3.5-turbo', messages: [...] })
  });
  

  ---

  ✅ 总结一句话：

  OpenAI 和 Anthropic 的 API 没有设置 CORS，是为了防止你把密钥暴露在浏览器里。你必须通过后端代理来安全地调用它们。

  如果你在做前端项目，可以用 Next.js、Nuxt、Express 等框架搭一个中间层，既安全又合规。