Next.js Discord

Discord Forum

Debugging CORS errors?

Unanswered
Singapura posted this in #help-forum
Open in Discord
SingapuraOP
I am having a strange occurance with my Next production deployment, certain requests are just showing up as blocked:other with no other information available.

I am not sure how I can debug this, if I can't replicate it on my local machine, where all requests work normally.

I tried using lcl.host https://lcl.host/ to set up a local instance on a URL, but this is even more broken than production deployment because here all external requests are being blocked.

Could someone please point me in the right direction to debug this?

The main issue is with images from this url: https://media-cdn.tripadvisor.com/media/attractions-content--1x-1/0b/39/9e/6a.jpg . They're from the Viator partner API. Normal <img tags.

2 Replies

SingapuraOP
Here's my next.config.mjs

import { withSentryConfig } from "@sentry/nextjs";
import withBundleAnalyzer from "@next/bundle-analyzer"
import withPlugins from "next-compose-plugins"
import { env } from "./env.mjs"
import createNextIntlPlugin from 'next-intl/plugin';
import autoCert from "anchor-pki/auto-cert/integrations/next";


const withNextIntl = createNextIntlPlugin();

const withAutoCert = autoCert({
    enabledEnv: "development",

});

/**
 * @type {import('next').NextConfig}
 */
const config = withPlugins(
    [
        [withBundleAnalyzer({ enabled: env.ANALYZE })],
        withNextIntl,
        withAutoCert,
    ],
    {
        // trailingSlash: false,
        reactStrictMode: false,
        images: {
            remotePatterns: [
                {
                    protocol: 'https',
                    hostname: '**',
                },
                {
                    protocol: 'http',
                    hostname: '**',
                },
            ],
        },
        logging: {
            fetches: {
                fullUrl: true,
            },
        },
        eslint: {
            ignoreDuringBuilds: true
        },
        experimental: { instrumentationHook: true }
    })
export default withSentryConfig(config, {sentry stuff});
and middleware.ts

import createMiddleware from 'next-intl/middleware';
import { locales, defaultLocale, pathnames } from './config';
import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

const handleI18nRouting = createMiddleware({
    locales,
    defaultLocale,
    localePrefix: 'as-needed',
    pathnames
});

export async function middleware(request: NextRequest) {
    const response = handleI18nRouting(request);

    const supabase = createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                getAll() {
                    return request.cookies.getAll()
                },
                setAll(cookiesToSet) {
                    cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))

                    cookiesToSet.forEach(({ name, value, options }) =>
                        response.cookies.set(name, value, options)
                    )
                },
            },
        }
    )

    await supabase.auth.getUser();
    
    return response;
}

export const config = {
    matcher: ['/((?!api|_next|.*\\..*).*)']
};