I am currently working on a project with a frontend client in Next.js 13.2.3 and a backend in ASP.NET Web API (both saved locally on my pc as separate projects). The backend API is functioning well as I can monitor the requests using Swagger UI, and I can successfully fetch data from https://jsonplaceholder.typicode.com/users in my Next.js app.
The problem arises when I attempt to retrieve data from my backend API within the frontend. I have updated the CORS settings in the backend to allow connections from (the location where the frontend is being served). I am confident that the backend is not the issue since this setup worked without any problems in another React.js project using Vite.
This snippet shows my configuration for CORS in the Program.cs file of my ASP.NET Web API, along with the storage of the "frontend-url" in the appsettings.Development.json file:
(code snippet provided)
In my Next.js project, the code in my page.tsx file located at src\app\dashboard\page.tsx attempts to fetch data:
(code snippet provided)
Upon executing the code, an error is thrown in the browser:
(error details provided)
I am wondering if the issue could be related to hosting both components on the same localhost. I have reviewed the documentation but found no specific information regarding fetching data from localhost servers. Substituting the localhost URL with "https://jsonplaceholder.typicode.com/users" works perfectly. Additionally, I attempted creating a new Next.js project using npm instead of pnpm, but the issue persisted.