typescript - GET-forespørsel fra Nextjs 13.2.3 gir TypeError: fetch feilet ved Object.fetch

Jeg har en frontend-klient i Next.js 13.2.3 og en backend i ASP.NET Web API (begge lagret lokalt på PC-en min, de er forskjellige prosjekter). Backend API fungerer fint fordi jeg kan se forespørsler gå inn/ut med hjelp av Swagger UI. Jeg kan også perfekt hente https://jsonplaceholder.typicode.com/users fra Next.js-appen min.

Problemet oppstår når jeg prøver å hente min backend-API fra frontend. Jeg har oppdatert CORS i backend for å tillate http://127.0.0.1:3000 (som er hvor frontend blir servert). Jeg vet at backend ikke er et problem fordi dette fungerte med mitt andre React.js-prosjekt ved bruk av Vite.

Dette er min ASP.NET Web API Program.cs-fil med CORS der "frontend-url" er lagret i filen appsettings.Development.json:

using Microsoft.EntityFrameworkCore;
using PropertyManagerWebAPI.Models;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllers();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();



#region Set up Cors policy to be able to to talk to React client

var provider = builder.Services.BuildServiceProvider();
var configuration = provider.GetRequiredService<IConfiguration>();

builder.Services.AddCors(options =>
{
    var frontendUrl = configuration.GetValue<string>("frontend_url");



    options.AddDefaultPolicy(builder =>
    {
        builder.WithOrigins(frontendUrl).AllowAnyMethod().AllowAnyHeader();
    });
});
#endregion

//Dependency Injection of DbContext Class 
builder.Services.AddDbContext<APIDbContext>(options =>
options.UseSqlServer(builder.Configuration.GetConnectionString("DevConnection")));


var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();

app.UseCors();

app.UseAuthorization();

app.MapControllers();



app.Run();

Dette er min Next.js, og banen til min page.tsx-fil: src\app\dashboard\page.tsx

async function getData() {

    const response = await fetch("https://127.0.0.1:7227/api/Properties")
    if (!response.ok) {

        throw new Error('Failed to fetch data');
    }

    return response.json()
}

export default async function ProductsPage() {

    const a: any = await getData()

    return (
        <>
            <div>
                {a.map((info: any) =>
                    <div key={info.id}>
                        {info.city}
                    </div>
                )}
            </div>
        </>
    )
}

Dette er feilen som kastes i nettleseren:

Uncaught TypeError: fetch failed
    at Object.fetch (C:\Users\bob\Desktop\all_important\myproject\node_modules\.pnpm\[email _biqbaboplfbrettd7655fr4n2y\node_modules\next\dist\compiled\undici\index.js:1:26686)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

The above error occurred in the <RedirectErrorBoundary> component:

    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:361:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:368:11)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:404:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:317:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:59:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:72:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:23:11)
    at section
    at ScrollAndFocusHandler (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:153:1)
    at InnerLayoutRouter (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:195:11)
    at RedirectErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:361:9)
    at RedirectBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:368:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:397:9)
    at NotFoundBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:404:11)
    at LoadingBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:317:11)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:72:11)
    at RenderFromTemplateContext (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/render-from-template-context.js:12:34)
    at OuterLayoutRouter (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/layout-router.js:23:11)
    at body
    at html
    at ReactDevOverlay (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:61:9)
    at HotReload (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:20:11)
    at Router (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/app-router.js:48:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:59:9)
    at ErrorBoundary (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/error-boundary.js:72:11)
    at AppRouter (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/components/app-router.js:24:13)
    at ServerRoot (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/app-index.js:126:11)
    at RSCComponent
    at Root (webpack-internal:///(app-client)/./node_modules/.pnpm/[email _biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/app-index.js:143:11)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundaryHandler.

Kan dette være et serverproblem, der jeg kjører to ting på samme localhost?

Jeg har sett gjennom dokumentasjonen, men det står ingenting om henting fra localhost-servere. Alt fungerer fint hvis du erstatter localhost-URL-en med "https://jsonplaceholder.typicode.com/users" og endrer parametrene til den respektive nøkkel-verdi-parene de har. Jeg har også prøvd å lage et nytt Next.js-prosjekt med npm i stedet for pnpm, men dette endret ingenting.

Svar #1

Så etter at @Sebastien Castiel nevnte «https»-delen, brukte jeg en try-catch-blokk på fetch-forespørselen for å se den utvidede feilkilden og fant dette i konsollloggen min:

Error: self signed certificate
  at TLSSocket.onConnectSecure (node:_tls_wrap:1535:34)
  at TLSSocket.emit (node:events:513:28)
  at TLSSocket._finishInit (node:_tls_wrap:949:8)
  at TLSWrap.ssl.onhandshakedone (node:_tls_wrap:730:12)
  at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
code: 'DEPTH_ZERO_SELF_SIGNED_CERT'}

Jeg undersøkte Next.js-protokoller for SSL-sertifikater og fant ut at de ikke tilbyr noen sertifikater når man utvikler lokalt. Trengte ikke å møte dette da jeg utviklet med Vite, ser ut som Vite automatisk tildeler sertifikater når du prøver å utvikle med "https". Så valgene dine er:

Alternativ 1. Jeg har ikke gjort dette ennå, men du kan opprette et lokalt sertifikat. Å kalle lokalt dotnet https-backend fra lokal NextJS resulterer i FetchError: selv-signert sertifikat. Du kan gjøre dette for MacOS også her.

Alternativ 2. I Visual Studio-prosjektets løsningsutforsker, finn en mappe for egenskaper og gå til filen launchSettings.json og kommenter ut "https"-URLen. Du kan også plassere "http"-URLen før "https".

{
  ...
  "profiles": {
    ...
      "applicationUrl": "https://localhost:7227;http://localhost:5085",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    }  
}

Til slutt var det en flott opplevelse, fordi jeg lærte mer om Secure Sockets Layer (SSL)-sertifikater da jeg jobbet med Nextjs.