Can frontend issues trigger CORS errors in a NextJS and Gin-based web app?

Frontend
1

I’m building a website with NextJS for the frontend and Gin (Go) for the backend. I’m running into CORS errors and I’m wondering if the problem could be on the frontend side. I’m using axios to talk to the Gin API.

Here’s a snippet from my code:

// DataFetcher.tsx
useEffect(() => {
  async function grabInfo() {
    setIsLoading(true);
    try {
      const result = await fetchInfo(curPage, itemsPerPage, apiParams);
      updateItems(result.data.items);
      updateTotalCount(result.data.total_count);
    } catch (err) {
      setErrorMsg('Failed to get data');
    } finally {
      setIsLoading(false);
    }
  }

  grabInfo();
}, [curPage, itemsPerPage, apiParams]);

// api.ts
export async function fetchInfo(page, limit, endpoint) {
  try {
    const divider = endpoint.includes('?') ? '&' : '?';
    const apiUrl = `${endpoint}${divider}page=${page}&limit=${limit}&query`;
    const result = await apiClient.get(apiUrl);
    return result.data;
  } catch (err) {
    console.log('Oops:', err);
  }
}

Any ideas on what might be causing the CORS issue? Could it be something in my NextJS setup?

2

yo zack, cors probs are usually server-side. check ur gin setup. make sure it’s allowing requests from ur nextjs domain. also, double-check ur api endpoint urls. sometimes a typo can mess things up. if u still got issues, post the exact error message u get. that’ll help us figure it out!

3

From your description, it’s unlikely that the CORS issue is originating from the frontend. CORS is typically enforced by browsers and controlled by server-side configurations. In your case, the problem is more likely on the Gin backend.

To troubleshoot, first ensure your Gin server is properly configured to allow CORS. You might need to add middleware that sets appropriate headers. For example:

router.Use(cors.Default())

Also, check if your API is running on a different port or domain than your NextJS app. If so, make sure the Gin server explicitly allows requests from your frontend’s origin.

If the issue persists, examine the specific CORS error message in your browser’s console. It often provides valuable information about what’s causing the problem.

4

hey there! have you checked your nextjs configs?
sometimes corss issues can show up if the api routes isnt set up correctly.
what does your gin backend look like? could be your cors settings.
btw, do u use a proxy? what cors error exactly?