firebase functionsへのリクエストで、404エラーになってしまいます。

実現したいこと

firebaseHostingへデプロイしたアプリから、firebaseFunctionへリクエストを送り、apiを利用したいです。

前提

firebaseHostingへデプロイしたアプリから、firebaseFunctionへリクエストを送り、apiを利用したいです。
firebaseFunction側には特にエラーが図れておらず原因がわかりません。
一度ルーティングの部分を変更して実行したときに、「hello world」がかえってきたのですが、
その後なぜかエラーになるようになってしまいました。
ルーティングの部分や、デプロイ方法に問題があるのでしょうか?

発生している問題・エラーメッセージ

polyfills.ea3cb635cad86c66.js:1 POST https://us-central1-musictomovie-af3d1.cloudfunctions.net/api/hello 404 z @ polyfills.ea3cb635cad86c66.js:1 ・ ・ ・ 6260.eeadfbd059add584.js:1 POSTリクエストが失敗しました。 Lt {headers: ee, status: 404, statusText: 'OK', url: 'https://us-central1-musictomovie-af3d1.cloudfunctions.net/api/hello', ok: false, …}

該当のソースコード

■クライアントサイド // postリクエストのテスト用 sendPostRequest() { const formData = { audio: this.audioFile, image: this.imageFile, }; this.http.post<any>('https://us-central1-musictomovie-af3d1.cloudfunctions.net/api/hello',formData).subscribe( (data) => { this.response = data.message; console.log('サーバーからの応答:', data); // コンソールにも表示(確認用) }, (error) => { console.error('POSTリクエストが失敗しました。', error); } ); } ■サーバーサイド ●index.ts: import * as functions from "firebase-functions"; import app from "./app"; // Express アプリケーションを Firebase Functions にラップします const api = functions.https.onRequest(app); // Firebase Functions のエントリーポイントとしてエクスポートします export { api }; ●app.ts: import express from 'express'; import bodyParser from 'body-parser'; import cors from 'cors'; import mediaRoutes from './routes/media.routes'; import helloRoutes from './routes/hello.routes'; const app = express(); const PORT = process.env.PORT || 3000; app.use(bodyParser.json()); // CORS設定(手動で設定) app.use(cors({ origin: ['https://us-central1-musictomovie-af3d1.cloudfunctions.net', 'https://us-central1-musictomovie-af3d1.cloudfunctions.net/api/', 'https://us-central1-musictomovie-af3d1.cloudfunctions.net/api/hello', 'https://musictomovie-af3d1.web.app'], allowedHeaders: ['Origin', 'X-Requested-With', 'Content-Type', 'Accept'], })); // エンドポイントのルーティング app.use('/api', mediaRoutes); app.use('/api', helloRoutes); // テスト用のログを追加 console.log("mediaRoutesのルーティングは以下のパスで設定されています:"); console.log("/api/media/createVideo"); console.log("/api/hello"); // app.listen(PORT, () => { // console.log(`Server is running on port ${PORT}`); // }); export default app; ●hello.routes.ts:

import express, { Router, Request, Response } from 'express';

const router: Router = express.Router();

console.log("hello.routes.tsが呼び出されました")

// "hello world"をクライアントに返すエンドポイント(POSTリクエスト)
router.post('/hello', (req: Request, res: Response) => {
try {
console.log("hello worldを返します")
res.json({ message: 'hello world' }); // JSON形式で応答を返す
} catch (error) {
console.error("エラーが発生しました:", error);
res.status(500).json({ error: 'Internal Server Error' });
}
});

export default router;

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント