Not Reaching AI Layer, Possible Middleware or Content-Type Misrouting
Hey folks! I've been back and forth with Firebase support.. no luck yet.
I'm trying to use the AI features, but based on the server logs, the error is happening before the request even reaches the AI logic.
Here's the actual issue:
Problem: The request to /recommendations is being sent with a Content-Type of text/plain;charset=UTF-8, which is not valid for req.json() in my route.ts. The backend expects application/json.
This mismatch causes the server to throw a 500 error before any AI processing can even begin. The logs confirm that the request is received, but the incorrect content type leads to a parsing failure.
I’ve already:
Confirmed the fetch() call is in a "use client" file
Explicitly set Content-Type: application/json and used JSON.stringify(payload)
Tested with a hardcoded payload
Updated the route handler and all related frontend files
But despite these changes, the request is still received as text/plain, which makes me think something in the stack — middleware, the app router, or possibly an edge runtime — is intercepting and mutating the request.
It’s also odd that even after I update files, the same error persists in the logs, almost like the changes aren’t taking effect or there’s a stale build/deployment in play.
Would it be possible for someone to:
Check if middleware, headers, or proxy rewrites are interfering?
Confirm if there’s any caching, deployment sync issues, or routing conflicts at the platform level?
Again, this error occurs before any Genkit/AI service is touched, this is strictly a request handling problem.
Really appreciate any help. I’ve hit a wall here.
Hi @yohannabaez
Thanks for reaching out. Sorry that you're running into this issue. It's unclear to me what exactly you're doing and what's going wrong here (beside the mismatched content type). Could you please provide more information?
- Which client are you using? (Sounds like Next.js)
- What is the backend stack (Genkit on Node?)
- Genkit version
- An MVP or code snippet will also greatly help.
Based on the description, this does not sound like a Genkit issue, but more details will help confirm.
Thank you for replying @ssbushi !! I've worked on it since yesterday, but then Firebase had an outage, and I have no idea what stuck. I'll go back today and see what new errors (if any) pop up.
Stack Overview Client: Yes, using Next.js 14 App Router with React Server Components.
Frontend Runtime: Firebase Hosting + Google Cloud Run, deployed via Firebase CLI.
Backend Stack: Genkit (Google’s AI developer framework) genkit zod for schema validation Hosted on Node.js 20 Genkit functions reside in a functions/ folder (Firebase Functions for Cloud Run) Firestore + Firebase Extensions: Vertex AI Semantic Search Gemini Multimodal Tasks Cloud Vision AI App is structured for edge compatibility but not using edge explicitly.
Genkit Version: @genkit-ai/[email protected]
Problem Summary POST to /api/recommendations is failing before reaching any Genkit logic. The Content-Type is arriving as text/plain;charset=UTF-8 instead of application/json -someone suggested to add a header to the request with the length of your stringified request body headers:
{
'Content-Length': Buffer.byteLength(stringified),
}
...did that, but don't it stuck
Request body is malformed due to React Server Component (RSC) action interference.
Key Code Snippet (API Route):
// /app/api/recommendations/route.ts
import { NextRequest, NextResponse } from 'next/server';
import { opportunityRecommendation } from '@/ai/flows/opportunity-recommendation';
import { OpportunityRecommendationInputSchema } from '@/types';
import { z } from 'zod';
export async function POST(req: NextRequest) {
const contentType = req.headers.get('content-type');
if (!contentType?.includes('application/json')) {
return NextResponse.json({ error: 'Invalid Content-Type' }, { status: 415 });
}
const rawBody = await req.text();
const parsed = JSON.parse(rawBody);
const validated = OpportunityRecommendationInputSchema.safeParse(parsed);
if (!validated.success) {
return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 });
}
const result = await opportunityRecommendation(validated.data);
return NextResponse.json(result);
}
Client Snippet (Ensure it's in a "use client" file):
'use` client';
async function fetchRecommendations(profile) {
const payload = {
userId: profile.id,
bio: profile.bio,
medium: profile.medium,
preferences: profile.preferences,
};
const res = await fetch('/api/recommendations', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Content-Length': Buffer.byteLength(JSON.stringify(payload)).toString(),
},
body: JSON.stringify(payload),
});
const data = await res.json();
return data;
}
Any help would be appreciated! Hopefully, this latest outage is in my favor :/ womp womp
Hi @yohannabaez
Thanks for reaching out. Sorry that you're running into this issue. It's unclear to me what exactly you're doing and what's going wrong here (beside the mismatched content type). Could you please provide more information?
- Which client are you using? (Sounds like Next.js)
- What is the backend stack (Genkit on Node?)
- Genkit version
- An MVP or code snippet will also greatly help.
Based on the description, this does not sound like a Genkit issue, but more details will help confirm.
so, a disclaimer: I am not very familiar with Next.js and I relied on Gemini to understand your problem.
You mentioned that the request does not reach the API and fails with a 500, but your code snippet rejects with 415 if content-type is not application/json. Are you sure that is the exact error that you're recieving?
Buffer is not part of the Client (non-nodeJS) API, and should not be available in the use client file. Can you try removing the 'Content-Length' and just set the 'Content-Type'? The lengths should be handled by fetch.
Also, please share the exact error/stack if possible.
Thanks!