Helicone Community Page

Updated 3 months ago

CORS Error in React App

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
Attachment
image.png
J
n
23 comments
Are you getting a CORS error when using azure directly?
No. I was using the @azure/OpenAI package previously which was working fine.
I see - we shouldn't be changing any of the headers going back to the client so CORs should be enabled if Azure has them enabled
It works if I send the request from the CLI with curl
That is expected with CORs
Maybe I should try sending a request directly using an OpenAI key, not Azure?
oh you are getting a 404
I dont think this is releated to CORs at all
The preflight is returning a 404 (see the image I posted)
Do you have time to hop on a quick call?
Join Zoom Meeting
https://us06web.zoom.us/j/81573599852?pwd=eiKVMTiNaGLuYe6JJDTpubNCzHMESl.1

Meeting ID: 815 7359 9852
Passcode: 735598

---

One tap mobile
+16694449171,,81573599852#,,,,735598# US+16699006833,,81573599852#,,,,735598# US (San Jose)

---

Dial by your location
+1 669 444 9171 US
+1 669 900 6833 US (San Jose)
+1 408 638 0968 US (San Jose)
+1 253 205 0468 US
+1 253 215 8782 US (Tacoma)
+1 346 248 7799 US (Houston)
+1 719 359 4580 US
+1 312 626 6799 US (Chicago)
+1 360 209 5623 US
+1 386 347 5053 US
+1 507 473 4847 US
+1 564 217 2000 US
+1 646 876 9923 US (New York)
+1 646 931 3860 US
+1 689 278 1000 US
+1 301 715 8592 US (Washington DC)
+1 305 224 1968 US
+1 309 205 3325 US

Meeting ID: 815 7359 9852
Passcode: 735598

Find your local number: https://us06web.zoom.us/u/kbBd36z5FL
or we can meet tomorrow too
Thanks, let me know when you have something.
Any feedback on the CORS issue with Azure/OpenAI?
Hi sorry for the delay here. We looked into this issue and weren’t able to figure out why this is happening.

It’s on our backlog for now, as other things came up and took higher priority
Hi - Any update on this? Microsoft has finally provided access to gpt-4-turbo and gpt-35-32k models on Azure OpenAI so we're planning to switch back to the Azure OpenAI service now.
Hi no updates on this yet. Sorry for the delays, are you still making calls from the client?
Add a reply
Sign up and join the conversation on Discord