CORS when redirecting with netlify

I recently had a similar problem with projects hosted on Firebase App Hosting. The problem didn't return explicitly as CORS, instead it threw this error on the client: SyntaxError: Unexpected token 'C', "Cross-site"... is not valid JSON

Looking it up I learned that it was caused by SvelteKit's built-in CSRF protection and the solution was to disable it and build a custom solution using the Handle hook, which I learned in this great article. The three main steps are:

1. Start by disabling the protection

// svelte.config.ts
import adapter from '@sveltejs/adapter-auto';

export default {
  kit: {
    adapter: adapter(),
    csrf: {
      checkOrigin: false, // Disable built-in origin checking to allow custom middleware
    },
  },
};

2. Create your custom CSRF handler

// src/hooks/csrf.ts
import type { Handle } from '@sveltejs/kit';
import { json, text } from '@sveltejs/kit';

/**
 * Custom CSRF Protection Middleware
 *
 * @param allowedPaths - List of URL paths that bypass CSRF protection.
 * @param allowedOrigins - Trusted origins allowed to make cross-origin form submissions.
 */
export function csrf(allowedPaths: string[], allowedOrigins: string[] = []): Handle {
    return async ({ event, resolve }) => {
        const { request, url } = event;

        // Get the 'origin' header from the incoming request
        const requestOrigin = request.headers.get('origin');

        // Determine if the request comes from the same origin
        const isSameOrigin = requestOrigin === url.origin;

        // Check if the request origin is explicitly allowed (trusted external origins)
        const isAllowedOrigin = allowedOrigins.includes(requestOrigin ?? '');

        // Define conditions under which the request is forbidden (potential CSRF attack)
        const forbidden =
            isFormContentType(request) && // Checks if the request contains form data
            ['POST', 'PUT', 'PATCH', 'DELETE'].includes(request.method) && // State-changing methods
            !isSameOrigin && // Origin mismatch
            !isAllowedOrigin && // Not explicitly allowed
            !allowedPaths.includes(url.pathname); // Path not explicitly allowed

        // If forbidden, return a 403 Forbidden response immediately
        if (forbidden) {
            const message = `Cross-site ${request.method} form submissions are forbidden`;

            // Return JSON or plain text based on request headers
            if (request.headers.get('accept') === 'application/json') {
                return json({ message }, { status: 403 });
            }
            return text(message, { status: 403 });
        }

        // If the request passes CSRF checks, continue to the next middleware or endpoint
        return resolve(event);
    };

    /**
     * Helper function to check if request 'origin' is allowed.
     */
    function isAllowedOrigin(requestOrigin: string | null, allowedOrigins: string[]) {
        return allowedOrigins.includes(requestOrigin ?? '');
    }

    /**
     * Helper function to determine if request content-type indicates a form submission
     */
    function isFormContentType(request: Request) {
        const type = request.headers.get('content-type')?.split(';', 1)[0].trim().toLowerCase() ?? '';
        return ['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain'].includes(type);
    }
}

3. Chain it with your other handles in the server hooks:

// src/hooks.server.ts
import { sequence } from '@sveltejs/kit/hooks';
import { csrf } from './hooks/csrf';

// Define paths exempt from CSRF checks (e.g., public forms or APIs)
const allowedPaths = ['/api/public-form'];

// Define trusted origins allowed to make cross-origin form submissions
const allowedOrigins = ['https://trusted-site.com', 'http://localhost:5173'];

// Export the combined hooks using 'sequence' for better flexibility
export const handle = sequence(
    csrf(allowedPaths, allowedOrigins) // CSRF hook added here
    // You can chain additional middleware hooks here if needed
);

This code is straight from that article, my own implementation changed very little so I think is the best starting point. Definitely check the article for the details, and good luck!