ve been working on a project where the VoiceVox API is hosted on Google Cloud Platform (GCP) and my frontend is deployed using Firebase Hosting. I’m encountering persistent CORS issues when trying to interact with the VoiceVox API from my Firebase-hosted frontend.

Here is a summary of the issue and the steps I’ve taken so far:

Problem

When making API requests to the VoiceVox API hosted on GCP from the frontend deployed on Firebase Hosting, I encounter CORS errors. These errors do not occur when running the frontend locally with npm run dev.

Error Message

Access to fetch at 'https://voicevox-proto-mggisi6odq-dt.a.run.app/audio_query?speaker=2&text=%20%E3%81%9D%E3%81%86%E3%81%A0%E3%81%AD%EF%BC%81' from origin 'https://aipartner-426616.web.app' 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.

Environment

Frontend: React * Nextjs hosted on Firebase Hosting
API: VoiceVox API hosted on GCP

Steps Taken

Firebase Functions with CORS Middleware: Created a Firebase Function with an Express app that includes the cors middleware.

// functions/src/index.ts
import * as functions from 'firebase-functions';
import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors({ origin: true }));

app.get('/hello', (req, res) => {
  res.send('Hello from Firebase!');
});

exports.api = functions.region('asia-east1').https.onRequest(app);

Firebase Configuration: Updated firebase.json to configure functions and hosting.

json

{
  "functions": {
    "source": ".firebase/aipartner-426616/functions",
    "runtime": "nodejs14"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "api"
      }
    ]
  }
}

CORS Headers in Function Response: Explicitly set CORS headers in the Firebase Function response.

app.get('/voicevox-proxy', async (req, res) => {
  try {
    const response = await fetch('https://voicevox-proto-mggisi6odq-dt.a.run.app/audio_query', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(req.body)
    });
    const data = await response.json();
    res.set('Access-Control-Allow-Origin', '*');
    res.send(data);
  } catch (error) {
    res.status(500).send(error);
  }
});

Deploying: Deployed the functions and hosting using firebase deploy –only functions,hosting.

Despite these steps, I still face CORS errors when accessing the API from the deployed frontend. The errors persist even though the same API requests work without issues during local development.

Questions

Why are CORS errors occurring despite the above configurations?

Is there a better way to handle CORS for APIs hosted on GCP accessed via Firebase Hosting?

Any specific settings or configurations on GCP that need to be adjusted?

Is there a known issue with Firebase Hosting and GCP APIs regarding CORS that I might be missing?

Any guidance or suggestions to resolve this CORS issue would be greatly appreciated. Thank you!