How do I get a nextjs api route to send a fetch request to an ASP.NET Core Api without getting a sel-CodePudding

I am creating a nextjs app with a .NET core api as the backend. I'm using nextjs' built in api routes as a proxy for the backend (allows Server Side handling of auth data into cookies also obfuscates endpoints).

However I'm currently getting this error:

"FetchError: request to https://localhost:7001/endpoint failed, reason: self signed certificate"

I first ran dotnet dev-certs https --trust as recommended by a number for answers/sites/blogs. However I received the message:

"A valid HTTPS certificate is already present."

I then followed this tutorial that recommended setting up a "development" CA set of files using the openSSL command that comes with bash. And have created a certificate however I'm unsure how exactly to install it, I've added it to my machine's (Windows) certificates store but I'm not sure how to make it work for localhost specifically (possible needs a variation to the setup from that post?).

Is there a way to simply get this working locally? I feel like it's a pretty standard use case but perhaps not? nextjs -> nextjs api routes -> .NET core Api.

The requests do work when sending a fetch directly from the app to https://localhost:7001/endpoint, but when an api/endpoint.js route file (on the "server") calls fetch it fails the request. Does the nextjs app need to be running on https://localhost:3000 rather than http? Is it because the /api route in the nextjs app is not from a secure url?

In which case is there a reason why nextjs apps don't default to https? It seems looking online that I need to do a custom setup of the server to get that working?

It feels like none of this is made very clear/simple but I'm sure it's just my understanding.

Thanks.

CodePudding user response：

Nextjs doesn't seem to have an https solution out of the box, and it doesn't support SSL out of the box for local development. You can use something like local-ssl-proxy to enable https.

If you want to do a custom setup of the server, you can use devcert to automatically generate certificates. For more details, you can refer to this link. Here's a complete example and tutorial on setting up a custom local server with NextJS.

Helpful link: How can I use Next.js over HTTPS instead of HTTP?

Hope this can help you.

CodePudding user response：

To get .NET working with Next.js I used the article and code provided by David Nissimoff at Microsoft.

Medium article: https://medium.com/@david.nissimoff/next-js-meets-asp-net-core-a-story-of-performance-and-love-at-long-tail-41cf9231b2de

His original code which includes his Nuget package as well as a sample of getting it going: https://github.com/davidnx/NextjsStaticHosting-AspNetCore

I then took that the sample part, updated the csproj to allow publishing the nextjs as static code in /wwwroot of the API project: https://github.com/kewlniss/NextNet

Since browsing the nextjs static app is actually done from the .NET site there are no cert errors. I can either browse to https://localhost:44123 or http://localhost:55123 and they both serve the Next.js content from http://localhost:3000 without issue.

Those ports are set in launchSettings.

I was wanting to get Next.js working with .NET for a while and David's article and Nuget package was exactly what I needed. Maybe it will help you too.

I also actually updated the Next.js code to call the API in .NET to show the two working together.