Next.js Discord

Discord Forum

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

Unanswered
vTotal posted this in #help-forum
Open in Discord
vTotalOP
In my project, I'm running a fetch function. I've made it under a library component in the folder /library/data.js and it looks like this:
export async function GetData(query, variables) {

    const { data } = await fetch(process.env.NEXT_PUBLIC_GRAPHQL_URL, {
    
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query, variables }),
        next: { revalidate: parseInt(process.env.REVALIDATE_TIME) },
    
    }).then((res) => res.json());

    return data;

}


Now this query seems to work for pretty much everything, building pages and all. However, although I had it working previously and nothing has changed about this component, it's decided that search functionality isn't going to work.

I've got a Search Page, which currently looks like this:
import SearchBox from "@/components/search/searchBox";
import SearchResults from "@/components/search/searchResults";
import { GetData } from "@/lib/data";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { SEARCH_RESULTS } from "@/data/search";

const GetResults = async (query) => {
    const data = await GetData(SEARCH_RESULTS, { search: query });
    const values = Object.values(data);
    const results = [];
    values.forEach((value) => {
        if(value.edges.length) {
            results.push(value.edges);
        }
    });
    // flatten the array
    const flatResults = [].concat.apply([], results);
    return flatResults;
};

const SearchPage = () => {
    const router = useRouter();
    const { query } = router.query;

    const [results, setResults] = useState([]);

    useEffect(() => {
        setResults([]);
        if (query) {
            GetResults(query).then((res) => {
                setResults(res);
            });
        }
    }, [query]);

    return (
        <div>
            <h1>Search</h1>
            <SearchBox className={'bg-black text-white border border-white rounded-md px-2 py-1'} />
            <SearchResults results={results} query={query} />
        </div>
    )
}

export default SearchPage;


The <SearchBox /> is just an input that handles Debouncing and the pathname of the page, and the <SearchResults /> just helps flatten the array of the results.

But now when I attempt to run this, I get an error as pictures below:

3 Replies

vTotalOP
I can confirm that the issue is there, as the preflight suggests:
But I don't know how to fix this or why this even started appearing in the first place? It was literally working a day or two ago, and as far as I can see through the branch history nothing has changed. When I check through previous Vercel deployments, I still can't access search results.
vTotalOP
I've also now tried to integrate some middleware, doesn't seem to change anything.

import { NextResponse } from 'next/server'

const allowedOrigins = ['http://localhost:3000', process.env.NEXT_PUBLIC_LIVE_URL]

const corsOptions = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type',
}

export function middleware(request) {
    const origin = request.headers.get('origin') ?? ''
    const isAllowedOrigin = allowedOrigins.includes(origin)
    
    // Handle preflighted requests
    const isPreflight = request.method === 'OPTIONS'
    
    if (isPreflight) {
        const preflightHeaders = {
        ...(isAllowedOrigin && { 'Access-Control-Allow-Origin': origin }),
        ...corsOptions,
        }
        return NextResponse.json({}, { headers: preflightHeaders })
    }
    
    // Handle simple requests
    const response = NextResponse.next()
    
    if (isAllowedOrigin) {
        response.headers.set('Access-Control-Allow-Origin', origin)
    }
    
    Object.entries(corsOptions).forEach(([key, value]) => {
        response.headers.set(key, value)
    })
    
    return response
}

export const config = {
    matcher: '/:path*',
}