.Net Core 7 backend developed but , it is not Working SSR Fetch in NextJS

[kubilaybzk]

I have developed an ASP.NET Core 6 Web API. Now, I want to use this API in the frontend with NextJS. While server-side rendering, I cannot access the data and encounter errors, but I can access the data during client-side rendering. How can I solve this?

I used macbook therefore I use docker for my SQL Server:

optionsBuilder.UseSqlServer("Data Source=192.168.16.1;Initial Catalog=EFCoreFirst;User ID=SA;Password=*************;TrustServerCertificate=True");

This is my BackEnd's program.cs gist.
https://gist.github.com/kubilaybzk/a365fc53458f5438b311f74c9fd77415#file-program-cs

This is my SSR code:

This is my CSR code:

This is my SSR result:

This is console error:

This is my terminal error .

I'm really researching and trying many techniques but haven't found a solution yet. I'm new to backend development with .Net, I was told to try methods like {mode:'no-cors'} in my research on the internet, I tried them but unfortunately I couldn't get a result.

My node version is : v20.5.0 Also my nextjs version is : "next": "13.4.12",

[masterkain]

localhost -- when running in a browser is one thing, when run in a docker environment is another

[kubilaybzk]

Okay but only sql is running on docker .Because as far as I know, I can't run mssql on mac in any other way, other than that, all my projects are running locally.

[masterkain]

but you need to expose the port from the running docker instance, try using compose maybe, it's a good idea anyway

[icyJoseph]

I guess, the .NET API is in the "same" network as your browser, but the Next.js app is not? How's the Next.js app running? Or rather in which environment is it started, and how?

[kubilaybzk]

I believe you're asking whether you need to perform this task from the "api" folder inside the "pages" directory, right?

[icyJoseph]

Not at all.

I'm asking if you can write a script, which - fetches from your .NET backend.

Like forget about next.js for a moment. And just create a JavaScript file that does fetch from your backend. Run your backend and - run the script. Since you have node 20, fetch is native so it should just work. If it doesn't, then we can suspect that it is not a next.js issue.

[kubilaybzk]

Yes, I tried a method as you mentioned, in addition I created an html file containing html tags and javascript codes.
I then ran the project using LiveServer using VSCode.

http://127.0.0.1:5500/index.html

I haven't had any problems here.
Additionally I wanted to run without server

file:///Users/........./Desktop/index.html

I did not encounter any errors here.

<table id="productTable" border="1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Ürün Adı</th>
            <th>Stok</th>
            <th>Fiyat</th>
            <th>Oluşturma Zamanı</th>
        </tr>
    </thead>
    <tbody id="tableBody">
        <!-- Veriler burada JavaScript ile doldurulacak -->
    </tbody>
</table>

<script>
    
    fetch("https://localhost:7039/api/Products/GetAll")
        .then(response => response.json())
        .then(products => {
            var tableBody = document.getElementById("tableBody");
            products.forEach(product => {
                var row = document.createElement("tr");
                row.innerHTML = `
                    <td>${product.id}</td>
                    <td>${product.name}</td>
                    <td>${product.stock}</td>
                    <td>${product.price}</td>
                    <td>${product.createTime}</td>
                `;
                tableBody.appendChild(row);
            });
        })
        .catch(error => {
            console.error("Error :", error);
        });
</script>

`
I then created a JavaScript file as you mentioned.

First of all, I wanted to use axios.
npm init -y
Here I added the package.json and package-lock.js files required for my project and installed for axios.
I got an Error :
Error fetching data: AxiosError: self-signed certificate

I add this configuration top of the my code
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';

[kubilaybzk]

Now ı thing there is something about my SSL Configurations. Because if there is not an problem ı don't need to write this
process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
command in my codes .

[icyJoseph]

The browser thing was a bit unnecessary. As said, you should focus on doing this from Node.

Also you didn't need axios, since Node 18.xx native fetch is supported, so not even npm init was needed.

How did you create your .NET HTTPS setup? Does it also work if you just reach it with http://localhost:7039 etc etc?

Does using something like Node 18.16 help at all?

[airtonix]

the detail about MSQL and docker is irrelevant. remove that information or strike it out... it'll just confuse the situation.

1. you need to show us how you start your .net api server.
2. your code shows you using https:// but your testing urls are http://. ❗ are you running your server with a valid ssl cert? if not then just run the server without ssl.
3. you also need to prove that the api server works:
   1. start the server
   2. in another terminal show the output of:
      a. curl http://localhost:7039
      a. curl http://localhost:7039/api
      a. curl http://localhost:7039/api/Products/GetAll
4. the image you posted here isn't really helpful. HAR files are far more useful. (They're just JSON files, so once you've exported it from chrome, sift and clean it of sensitive info)

[kubilaybzk]

1-) I am running my application using VSCode for Mac as usual.
2-) I am conducting my tests both via https:// and http:// protocols.
3-)

4-)This is my HAR file. https://drive.google.com/file/d/1cBdWokFUtK3tUFtALczxgmsdNHpvllff/view?usp=sharing

[airtonix]

you'll probably need to setup some another service on another port for non ssl that redirects to the ssl port.

Once you do that then your attmepts to fetch from http://... will show:

• a redirect response when fetched with curl
• a redirect and a follow up request to https in the browser.

[airtonix]

also for completenes:

show us what the output of these are:

curl http://localhost:7039
curl http://localhost:7039/api/
curl http://localhost:7039/api/Products
curl http://localhost:7039/api/Products/GetAll

curl https://localhost:7039
curl https://localhost:7039/api/
curl https://localhost:7039/api/Products
curl https://localhost:7039/api/Products/GetAll

[kubilaybzk]

I change my launch setting file , i have to remove all ssl configuration for it

{ "$schema": "https://json.schemastore.org/launchsettings.json", "iisSettings": { "windowsAuthentication": false, "anonymousAuthentication": true, "iisExpress": { "applicationUrl": "http://localhost:13187", "sslPort": 0 } }, "profiles": { "http": { "commandName": "Project", "launchBrowser": true, "launchUrl": "swagger", "applicationUrl": "http://localhost:5031", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" }, "dotnetRunMessages": true }, "https": { "commandName": "Project", "launchBrowser": true, "launchUrl": "swagger", "applicationUrl": "http://localhost:7039;http://localhost:5031", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" }, "dotnetRunMessages": true }, "IIS Express": { "commandName": "IISExpress", "launchBrowser": true, "launchUrl": "swagger", "environmentVariables": { "ASPNETCORE_ENVIRONMENT": "Development" } } } }

Thanks for @sabriozay .

[kubilaybzk]

Here is Changes