Antiforgery implementation with react in non-mvc project failing POST request

Question

So far I have reviewed the following information. link 1 link 2 Tutorial with demo

1. Configurations.

================

Only listing relevant configurations for:

server side http://localhost:2000 Startup.cs

services.AddAntiforgery(options =>
            {
                options.HeaderName = "X-XSRF-TOKEN";
                options.Cookie.Name = "XSRF-TOKEN";
}

===

services.AddCors ....
.WithExposedHeaders("X-XSRF-TOKEN")

==

app.Use((context, next) =>
            {
                if (string.Equals(path, "/", StringComparison.OrdinalIgnoreCase) ||
                    HttpMethods.IsPost(context.Request.Method) ||
                    HttpMethods.IsPut(context.Request.Method) ||
                    HttpMethods.IsDelete(context.Request.Method))
                {
                    var tokenSet = antiforgery.GetAndStoreTokens(context);

                    context.Response.Cookies.Append("XSRF-TOKEN", tokenSet.RequestToken!,
                       new CookieOptions
                       {
                           HttpOnly = false,
                           Secure = false,
                           IsEssential = true,
                           SameSite = SameSiteMode.Strict
                       });
                }

                return next(context);
            });

Client side http://localhost:1000

 headers.append('X-XSRF-TOKEN', getCookie('XSRF-TOKEN'));
 headers.append('Access-Control-Allow-Credentials', 'true')

2. POST call has credentials: 'include' .This end point is never hit because it has attribute [ValidateAntiforgeryToken]. If removed the API works fine.

================

3. Debugging

================

Network tab when debugging. Network/Header Tab Under response Header I see

Set-Cookie:

XSRF-TOKEN=token1path=/api; samesite=lax; httponly

Set-Cookie: XSRF-TOKEN=token2

Under request Header I see

Cookie:

XSRF-TOKEN=token3_mkto_trk=id:417-HWY-826&token:_mch-localhost-1699799039514-29092;

XSRF-TOKEN=token4

X-Xsrf-Token: token4

Network/Cookies tab Request cookies

XSRF-TOKEN value token1

XSRF-TOKEN value token4

_mkto_trk

Response cookies

XSRF-TOKEN value token1

Application tab

XSRF-TOKEN value token1

XSRF-TOKEN value token2

_mkto_trk

4. Attempted

================

This code response.headers.get('Set-Cookie') returns null to me. Based on the investigation made they say, it is not possible to read that value. So instead I am doing.

const cookies = document.cookie;
    if (cookies) {
        const cookieValue = document.cookie
        .split('; ')
        .find(row => row.startsWith(name))
        ?.split('=')[1];
        return cookieValue;
    }

5. I keep getting error 400 in my POST resquest.

================

6. I have added antiforgery.ValidateRequestAsync(context) within the app.Use without success.

================

7. Token API

================

I have tried to generate a token6 and include it in the header with a get request as follows but it also response with error 400.

[HttpGet]
        public IActionResult GetAntiForgeryToken()
        {
            var tokens = _antiforgery.GetAndStoreTokens(HttpContext);
            return Ok(new { xsrfToken = headerToken });
            }

I tried to hard code tokens across the project but .ValidateRequestAsync seems to generate its own token and my POST fails.

Do I have too many tokens?

Maybe I need https instead?

Please, what am I doing wrong.