尝试访问 Anthropic API 时 React 出现 CORS 错误

Question

我正在尝试在 React 中访问 Anthropic Claude API。

我尝试了两种方法：

1. 一个是使用 Axios 进行 API 调用
2. 其次是使用 Anthropic AI SDK for Typescript

在这两种方法中，我在控制台中收到“跨源请求被阻止”错误。

我还尝试了 CORS Anywhere 浏览器扩展和 React Proxy，但遇到了同样的错误。

来自我的 React 组件的 SDK 代码如下：

const submitHandler = async (e) => {
    e.preventDefault();
    const anthropic = new Anthropic({
      apiKey: "API KEY",
    });
    const msg = await anthropic.messages.create({
      model: "claude-3-opus-20240229",
      max_tokens: 1024,
      messages: [{ role: "user", content: "Hello, Claude" }],
    });
    console.log(msg);

调用 Claude API，期待响应结果，但出现 CORS 错误。

Answer 1

我以前从未使用过 Anthropic AI，但通常情况下，您可以在 API 设置中配置允许的主机。这使您的本地开发环境能够访问 API。