CORS: Message API return CORS issues.

firllyw commented 4 months ago

Step to Reproduce:

`const anthropic = new Anthropic({ apiKey: process.env.NEXT_PUBLIC_ANTHROPIC_API_KEY, });

function MyDiagrams() { const [loading, setLoading] = useState(false);

const askClaude = async (question) => {
    setLoading(true);

    const msg = await anthropic.messages.create({
        model: "claude-3-opus-20240229",
        max_tokens: 4000,
        temperature: 0,
        system: "some prompt engineering here",
        messages: [
            {
                "role": "user",
                "content": [
                    {
                        "type": "text",
                        "text": question
                    }
                ]
            }
        ]
    })

    if (!msg) {
        toast.error('Failed to get response from Claude');
        setLoading(false);
        return;
    }

    setLoading(false);
}

export default MyDiagrams;
`

snippet above is from a Page.js . 

Live app: https://flowy-ai.netlify.app/dashboard/my-diagrams/create

BrandonStudio commented 4 months ago

Before sending POST request, broswer will first send an OPTIONS preflight request to API (e.g. https://api.anthropic.com/v1/messages). But right now Anthropic API endpoint does not allow OPTIONS method.