I’m making a fully AI made app, for the sake of experimenting and because I needed something fast. One feature is importing a CSV file into a sqlite database (I’m using Bun) and another is adding notes to some row, but I’m facing a problem, one endpoint works and the other doesn’t (among others but I’m using this one as an example), if I import the csv file, it works great, but adding the notes the request doesn’t even reach the server (which is localhost of course) and I’m at the point I don’t even know what the crap is happening, not even Gemini or Grok could solve it.
The api structure is as follows:
- server/api
- migrations
- clear.delete.ts (this one works)
- notes.put.ts (this one doesn’t work)
- status.post.ts (works)
- migrations.get.ts (works)
- migrations.post.ts (works)
- pbrimport.post.ts (doesn’t work)
- server/middleware
- logRequests.global.ts (logs requests only on endpoints that say it works)
I’ll post just the parts that make the fetch and receive the data, it’s all the same.
ImportModal.vue:
let fetchOptions: RequestInit = {
method: "POST",
headers: { "Content-Type": "application/json" }, // Always JSON now
};
try {
if (currentUploadType === "main") {
apiUrl = "/api/migrations";
payload = { data: dataToUpload };
} else {
// PBR upload
apiUrl = "/api/pbr_import";
payload = { data: dataToUpload };
}
fetchOptions.body = JSON.stringify(payload);
const payloadSize = fetchOptions.body.length;
console.debug(`[UploadModal] Sending JSON payload (${payloadSize} bytes) to ${apiUrl}`);
const response = await $fetch(apiUrl, fetchOptions);
NotesModal.vue
// THIS DOESN'T WORK
try {
const response = await $fetch(apiUrl, {
// <-- Use full URL
method: "PUT",
body: {
virtual_server: props.virtualServerName,
notes: notesToSave,
},
// Content-Type: application/json is usually added automatically by $fetch for object bodies
});
if (response.success) {
migrations.post.ts — This endpoint is for the ImportModal.vue, the one that works
import { db, dbReady } from "@/server/db/index";
// Import Kysely specific types if needed for stricter validation, or use Partial
import type { WafMigracionTable } from "@/server/db/types";
import logger from "@/server/utils/logger";
// Define type for incoming records more strictly based on Kysely Insertable if desired
// This helps catch issues earlier if CSV parsing yields unexpected types
type IncomingRecord = Partial<Omit<WafMigracionTable, "id">>;
export default defineEventHandler(async (event) => {
const requestInfo = { url: event.node.req.url, method: event.node.req.method };
logger.info("[POST /api/migrations] Received request.", requestInfo);
try {
// Ensure DB setup is complete
await dbReady;
pbrimport.post.ts — This is the api endpoint for the ImportModal.vue, the else which posts to /api/pbr_import
// File: server/api/pbr_import.post.ts
import { db, dbReady } from "@/server/db/index";
import type { NewFirewallPbr, FirewallPbrUpdate } from "@/server/db/types";
import logger from "@/server/utils/logger";
// Remove readRawBody import if present
// import { readRawBody } from 'h3';
// Remove papaparse import
// import Papa from 'papaparse';
// Type for expected data row within body.data
interface PbrDataRow {
node_ip?: string | null;
priority?: number | string | null;
waf?: string | null;
[key: string]: any; // Allow other columns from client parsing
}
export default defineEventHandler(async (event) => {
const requestInfo = { url: event.node.req.url, method: event.node.req.method };
// Log expecting JSON now
logger.info("[POST /api/pbr_import] Received request (expecting JSON body).", requestInfo);
try {
await dbReady;
notes.put.ts — This endpoint is for the NotesModal.vue, this one doesn’t work, not even the logger.info or the middleware logs.
import { db, dbReady } from "@/server/db/index";
import type { NewVsNotes, VsNotesUpdate } from "@/server/db/types";
import logger from "@/server/utils/logger";
interface RequestBody {
virtual_server: string;
notes: string | null; // Allow null to clear notes
}
export default defineEventHandler(async (event) => {
const requestInfo = { url: event.node.req.url, method: event.node.req.method };
logger.info("[PUT /api/migrations/notes] Received request.", requestInfo);
try {
await dbReady;
At first I tought there was something wrong with the csv file, but I made a separate script to put the data in the database and it works ok, I just don’t know how or why one works and the rest doesn’t, maybe is something wrong with the file hierarchy or naming? For every case, the request is made on the client but it’s forever pending, and they doesn’t even reach the middleware let alone the endpoint, but the migrations.post.ts works ok. I tried axios for fetching, I also even tried downgrading nuxt and nothing.
