cors issue with next js & fumadocs (CORS Allow Origin Not Matching Origin)

Unanswered

Cuban Crocodile posted this in #help-forum

Cuban CrocodileOP

2024-09-16T12:24:16.698Z

Hello! I am facing issue when embedding self hosted umami in fumadocs layout file (in body tag)

            <body>
                <RootProvider>{children}</RootProvider>

                <script
                    defer
                    src="https://domain.something.tld/script.js"
                    data-website-id="id"
                ></script>
            </body>

I am not familar with next js (only svelte) so sorry if it's a basic question. I was not able to find any working solution. I even added the following in next js config file

    headers: async () => {
        return [
            {
                // mathching all API routes
                source: "/api/:path*",
                headers: [
                    { key: "Access-Control-Allow-Credentials", value: "true" },
                    { key: "Access-Control-Allow-Origin", value: "*" },
                    {
                        key: "Access-Control-Allow-Methods",
                        value: "GET,OPTIONS,PATCH,DELETE,POST,PUT",
                    },
                    {
                        key: "Access-Control-Allow-Headers",
                        value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
                    },
                ],
            },
        ];
    },

8 Replies

Cuban CrocodileOP

2024-09-17T16:18:52.760Z

Bump

Cuban CrocodileOP

2024-09-19T12:16:37.535Z

@fuma 💙 joulev could you help me out? Sorry for the ping :/

Someone suggested i make redirect but the script.js calls that api endpoint

fuma 💙 joulev

2024-09-19T12:29:59.967Z

this is irrelevant to Fumadocs, it's about Next.js and CORS. You need to provide more info

Cuban CrocodileOP

2024-09-19T14:13:05.454Z

i am integrating umami into fumadocs (umami is a self hosted analytics like google analytics )

So for starters i added the following to wiki/app/layout.tsx

export default function Layout({ children }: { children: ReactNode }) {
    return (
        <html lang="en" className={inter.className} suppressHydrationWarning>
            <body>
                <RootProvider>{children}</RootProvider>

                <script
                    defer
                    src="https://analytics.domain.tld/script.js"
                    data-website-id="id"
                ></script>
            </body>
        </html>
    );
}

but umami script.js calls an external endpoint, which is giving the cors issue