Hi,
I'm attempting to connect to the Helicone Proxy directly from a React App Front End. Yes I know this is a security risk, this is only a testing / dev environment, will not move to production. I'm connecting to an Azure OpenAI service.
I'm getting a CORS error when attempting to send a chat completion request. The same connection parameters work from the CLI (using curl) so I'm confident the set up is correct.
Here's the error from the console log:
Access to fetch at '
https://oai.hconeai.com/openai/deployments/[MY_DEPLOYMENT_HERE]/chat/completions?api-version=2023-07-01-preview' from origin 'http://localhost:41000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
I've attached a snapshot of the network request.
Here the connection setup:
const openai = new OpenAI({
baseURL: "
https://oai.hconeai.com/openai/deployments/" + process.env.REACT_APP_DEPLOYMENT_NAME,
apiKey: process.env.REACT_APP_OPENAI_API_KEY,
dangerouslyAllowBrowser: true,
defaultHeaders: {
"Helicone-Auth":
Bearer ${process.env.REACT_APP_HELICONE_API_KEY},
"Helicone-OpenAI-API-Base": process.env.REACT_APP_OPENAI_API_BASE,
"api-key": process.env.REACT_APP_OPENAI_API_KEY,
},
defaultQuery: { "api-version": process.env.REACT_APP_OPENAI_API_VERSION },
});
here's the chat completion request:
response = await openai.chat.completions.create({
model: "gpt-3.5-turbo",
messages: messages,
tools: functions,
tool_choice: "auto",
seed: 42,
temperature: 0
});
I'd appreciate any advice or fixes..
Thanks
nikk
