Helicone Community Page

Home
Members
nikkjazz
n
nikkjazz
Offline, last seen 4 months ago
Joined August 29, 2024
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
23 comments
n
J