How to Fix CORS Policy Error When Fetching OpenAI API from Localhost?

API
1

Hi everyone,
I’m running into a CORS issue while trying to make a fetch request to the OpenAI API from my local development server. Here’s the error I’m getting:

“Access to fetch at ‘…api.openai.com…’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.”

I’m working on a project running on localhost:5000, and I’m trying to call the OpenAI API. Has anyone encountered this before? How can I resolve this issue? I’ve heard about setting the mode to no-cors, but I’m not sure if that’s the right solution since I need the response data. Any advice or workarounds would be greatly appreciated!
Thanks in advance!

1 Like
2

Hi @quocvanict

Welcome to the dev forum.

Are you trying to call the API from the client side code of your project ?

1 Like
3

Yes, that’s right. I’m calling the API from the client side, using the Realtime API with WebRTC to handle it

4

But you wrote this? This suggests you are calling it from a server?

5

I’ve added some images regarding the issue I mentioned.

The image shows a browser console with multiple error messages related to CORS policy violations, missing elements, and connection failures. (Captioned by AI)
The image shows a browser console with multiple error messages related to CORS policy violations, missing elements, and connection failures. (Captioned by AI)1918×523 36.9 KB

1 Like
6

(post deleted by author)

7

Thank you for your advice. I’m calling an API to generate an ephemeral token, then using RTCPeerConnection to connect to https://api.openai.com/v1/realtime with that ephemeral token. It was working fine yesterday, but when I checked again today, the error I described above appeared

2 Likes
8

I’m using the sample code from the documentation at https://platform.openai.com/docs/guides/realtime-webrtc, and it’s encountering the same issue.

1 Like
9

(post deleted by author)

10

I tried using a VPN to test it, and it worked normally. It seems the API is blocking IPs from my country. Thank you for your support.

1 Like
11

Apologies I more fully understand your use case now. It wasn’t totally clear from the OP.

If you make progress, please post your solution here.

12

I am using a Chrome VPN extension to switch to an IP address from another country. I assume that my IP has been blocked by OpenAI for some reason.

1 Like
13

But the browser is enforcing CORS, no? Interesting.

Maybe it mistook the failure of preflight for a CORS issue?

14

I encountered the same error today. That CORS error made my existing apps stop working :frowning: . The app is built of reactjs + capacitors and WebRTC realtime is used. I really don’t know why fetch request does not work when requesting /v1/realtime endpoint to get SDP. Even though it works when requesting /v1/realtime/sessions endpoint to retrieve EPHEMERAL_KEY. Very strange, isn’t it ? Can any one from Open AI team please have a look ? Thank you very much in advance

16

(post deleted by author)

17

Here is an update. I already tried to send sdp and ephemeral token to nodejs endpoint where it requested open ai realtime endpoint to retrieve SDP. but it did not work either. it returned an error from Cloudflare security page saying

  • Sorry, you have been blocked
  • You are unable to access transceiver .api . openai. com …
    It seems an issue with Cloudflare :frowning:
1 Like
18

I can confirm that the Realtime API is working normally for WebRTC.

Tested on my end with OpenAI Realtime Console demo.

1 Like
19

No sadly it did not work for me. I just downloaded and test that openAI realtime console demo running on localhost:3000 :slight_smile: . it used to work before, but not today :frowning: