Claude API 启用 CORS，浏览器端直连无需代理

Claude API 启用 CORS，浏览器端直连无需代理 | 前端进阶之旅

Full translation

完整中文译文

Claude 的 API 现在支持 CORS 请求，实现了客户端应用调用

Anthropic 已经为其 JSON API 启用了 CORS 支持，这意味着现在可以直接从用户的浏览器调用 Claude LLM。

这是一个意义重大的新功能，被隐藏在这个 pull request 中：anthropic-sdk-typescript: add support for browser usage（通过这个 issue）。

Anthropic TypeScript SDK 的这一改变揭示了新的 JSON API 功能，我是通过深入代码发现的。

你现在可以添加以下 HTTP 请求头来为 Anthropic API 启用 CORS 支持，这意味着你可以直接从浏览器对 Anthropic 的模型进行调用：

anthropic-dangerous-direct-browser-access: true

Anthropic 之前一直不愿意添加此功能，因为它会助长一种不好的反模式：如果你在客户端代码中嵌入了 API 密钥，任何能访问该网站的人都可以窃取你的 API 密钥，并代表你进行请求。

尽管如此，这个功能仍然有合理的使用场景。对于暴露给可信用户的内部工具，这是可以的，或者你可以实现一种"自带 API 密钥"的模式，让用户提供自己的密钥供客户端应用使用。

碰巧的是，我自己构建过其中一个应用！我的 Haiku 页面是一个简单的客户端应用，它请求访问你的摄像头，要求输入 Anthropic API 密钥（存储在浏览器的 localStorage 中），然后让你拍照，并使用他们快速且便宜的 Haiku 模型将其转换为诗句。

之前我不得不在 Vercel 上运行自己的代理来为 Anthropic API 添加 CORS 支持，才能让我的 Haiku 应用正常工作。

今晚我升级了应用以发送这个新请求头，现在它可以直接与 Anthropic 通信，而不需要我的代理。

我实际上让 Claude 为我修改了代码（Claude 最初就构建了 Haiku 应用）。有趣的是，Claude 一开始反对这么做：

我必须强烈建议不要直接从浏览器进行 API 调用，因为它会暴露你的 API 密钥，违反了 API 安全的最佳实践。

我告诉它"不，我收到了 Anthropic 的新建议，说对我的私人内部工具这样做是可以的"，然后它就为我做了修改！

完整源代码可以在这里看到。这是一个简化的 JavaScript 代码片段，说明如何使用新请求头从浏览器调用他们的 API：

fetch("https://api.anthropic.com/v1/messages", {
  method: "POST",
  headers: {
    "x-api-key": apiKey,
    "anthropic-version": "2023-06-01",
    "content-type": "application/json",
    "anthropic-dangerous-direct-browser-access": "true",
  },
  body: JSON.stringify({
    model: "claude-3-haiku-20240307",
    max_tokens: 1024,
    messages: [
      {
        role: "user",
        content: [
          { type: "text", text: "Return a haiku about how great pelicans are" },
        ],
      },
    ],
  }),
})
  .then((response) => response.json())
  .then((data) => {
    const haiku = data.content[0].text;
    alert(haiku);
  });

本文是 Simon Willison 撰写的《Claude 的 API 现在支持 CORS 请求，实现了客户端应用调用》，发布于 2024 年 8 月 23 日。