CORS Error on https://api.anthropic.com/v1/messages API with Reacrt.js [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed last month.

Improve this question

I am facing CORS issue while integrating 'https://api.anthropic.com/v1/messages',

Does anyone solved it?

try {
      const response = await axios.post(
        'https://api.anthropic.com/v1/messages',
        {
          model: "claude-3-5-sonnet-20240620",
          max_tokens: 1024,
          messages: [
            { "role": "user", "content": "one word" }
          ]
        },
        {
          headers: {
            'x-api-key': 'APIKey',
            'anthropic-version': '2023-06-01',
            'content-Type': 'application/json',
          },
        }
      );
      console.log('Model used:', response.data.model);
      return response?.data?.choices[0]?.message?.content?.trim();
    } catch (error) {
      console.error('Error:', error.response ? error.response.data : error.message);
      throw error;
    }

You're out of luck. According to my tests, this resource's CORS configuration doesn't allow clients from arbitrary Web origins. You'll have to consume the resource from a client that's not browser-based. — jub0bs
– jub0bs, Commented Jul 13, 2024 at 15:54

Harsh Dobariya · Accepted Answer · 2024-07-12 16:47:35Z

1

Using this API directly in the ReactJS is supposed to throw CORS error for the security. In this method your API keys will be exposed to the end user who's going to use your application.

The better and safe approach to do this is to create a backend proxy which will attach your API key in the headers and call the anthropic API on your behalf.

answered Jul 12, 2024 at 16:47

Harsh Dobariya

1244 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kshiteej Jain Over a year ago

This is my plan B but would like to make it simple like how ChatGPT handled CORS to their end.

Collectives™ on Stack Overflow

CORS Error on https://api.anthropic.com/v1/messages API with Reacrt.js [closed]

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related