Calling ChatGPT API from Cloud Functions

2,989 views
Skip to first unread message

Samuel Watson

unread,
Mar 4, 2023, 12:44:59 PM3/4/23
to Firebase Google Group
I have a really simple `functions/index.ts` file with the boilerplate needed to call the ChatGPT API (contents below).

It works perfectly when I run the functions emulator and call it in my app, but I get a CORS error when I try call the deployed version from my app.

Any ideas what could possibly be going wrong?

```typescript
import * as functions from "firebase-functions";
import {defineString} from "firebase-functions/v2/params";
import {Configuration, OpenAIApi} from "openai";

const openAIKey = defineString("OPEN_API_KEY");

export const getSummary = functions.https.onCall(async (data) => {
  const configuration = new Configuration({
    apiKey: openAIKey.value(),
  });
  const openai = new OpenAIApi(configuration);
  const completion = await openai.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [
      {
        role: "user",
        content: data.prompt,
      },
    ],
  });
  const [choice] = completion.data.choices;
  return {
    response: choice.message ?? "no response",
  };
});
```

Frank van Puffelen

unread,
Mar 4, 2023, 1:21:10 PM3/4/23
to Firebase Google Group

Mani Bhushan Kumar

unread,
Mar 4, 2023, 1:21:40 PM3/4/23
to fireba...@googlegroups.com

The CORS error you get when calling your app's deployed version is most likely due to a web browser security feature that prevents cross-origin requests. This means that the browser will block any requests made from a different domain than the one serving the page.

To fix this, you can add CORS headers to your Cloud Functions HTTP response. You can do this by setting the appropriate headers in your function:
export const getSummary = functions.https.onCall(async (data, context) => {
  // Set CORS headers
  context.response.headers.set("Access-Control-Allow-Origin", "*");
  context.response.headers.set("Access-Control-Allow-Methods", "GET, PUT, POST, OPTIONS");
  context.response.headers.set("Access-Control-Allow-Headers", "Content-Type");

  // Your existing code


  const configuration = new Configuration({
    apiKey: openAIKey.value(),
  });
  const openai = new OpenAIApi(configuration);
  const completion = await openai.createChatCompletion({
    model: "gpt-3.5-turbo",
    messages: [
      {
        role: "user",
        content: data.prompt,
      },
    ],
  });
  const [choice] = completion.data.choices;
  return {
    response: choice.message ?? "no response",
  };
});

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/7a5d9703-3744-42ef-b60f-43f5905784cfn%40googlegroups.com.

Samuel Watson

unread,
Mar 4, 2023, 3:13:05 PM3/4/23
to Firebase Google Group
@Mani What's what ChatGPT said when I asked as well, but that does not seem to be the correct answer.

Siddharth Bose

unread,
Mar 6, 2023, 11:36:36 AM3/6/23
to Firebase Google Group
Dear,

Make sure you enable CORS module and set it as a middle ware. i.e  import cors; and for now make it for all domains.Once you know whats your domain you can single it out by specifying it. 
import cors;
// Enable CORS for specific origin
app.use(cors({
// origin: "https://example.com"
}));


You should also use an environment i.e env file to store your OPEN AI secret key or set it as environment variable.Accessing it though    process.env.chat_gpt_secret_key making sure it matches the environment variable.Make sure you also initialize you app to be able to be built as hosting it on local machine and any other hosting provider is different as the builds slighlty get different

 

Samuel Watson

unread,
Mar 7, 2023, 8:59:26 PM3/7/23
to Firebase Google Group
I don't think my use case is supposed to require the cors library, because I'm making an ordinary onCall function and then calling it from the same app (which is Firebase hosted):

1. I should be able to call the function from my app, and indeed I can for other similarly deployed functions.
2. The function should be able to call the OpenAI API, because it's doing so from a server environment (and indeed it can, if you test it directly).

It's almost as though the cloud function is detecting that the request originated from a browser, forwarding the origin information for that request to the OpenAI request somehow, and then that request is failing due to CORS. I don't know why the cloud function would do that, though.

Michael Bleigh

unread,
Mar 8, 2023, 12:12:55 PM3/8/23
to fireba...@googlegroups.com
What's most likely happening here is that there is an error occurring on the server side that is showing up as a CORS error because it's short-circuiting the normal CORS logic. Have you looked at your Cloud Functions logs to see if there are errors there?

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.

Siddharth Bose

unread,
Mar 8, 2023, 2:31:33 PM3/8/23
to Firebase Google Group
@samuel First of all make sure your API secret is not leaked in any form,if its the case make sure you have received a mail where it mentions that the key is rotated. If you dont require CORS make sure that you are not calling any function from another domain,that's cross origin.

APP a     <----- CORS ------>  PWA B <--------->  OPEN AI (CORS is already handled by the API,using session and  token )

Harini Janakiraman

unread,
Apr 3, 2023, 12:26:49 PM4/3/23
to Firebase Google Group
@samuel if you still looking for a solution, we created a bunch of demo apps that showcase how you can create Firebase Cloud Functions for using OpenAI in low-code using Rowy (a platform that lets you manage Firestore data on spreadsheet UI and build any automation with Cloud Functions deployed to your own FIrebase project). Sharing a few demo templates below.


You can check out many more such examples on Rowy's live playground.

SAURABH CHADHA

unread,
Apr 14, 2023, 5:18:54 PM4/14/23
to Firebase Google Group
Hii,

I want to make a demo with my data

calling Google cloud function and getting response from my custom data. If you can do the same, please connect with me for a paid small demo which you can build for me at +919216142737

Reply all
Reply to author
Forward
0 new messages