'Get the set-cookie header from response but it doesn't store in the browser

I am currently working on a project using Ionic React with .NET API for login process.

And this is the problem I am facing:

This is the Response Header of my post request

And when I try to look at the application cookie, it seems that it is not being set.

This is the application view which should see the jwt cookie has been stored.

I have already added these two params for my Axios post request but not work at all.

{withCredentials: true, credentials: 'include'}

Thank you for your time to look into my question or help!!!

Below are my request/response setting on the client-side and backend:

Axios request:

 const api = axios.create({
         baseURL: `https://localhost:7220/api/User`
     })
     api.post("/login", postData, {withCredentials: true, credentials: 'include'})
         .then(res => {             
             console.log(res);
          })
          .catch(error=>{
             console.log(error);
          })

Controller:

 Response.Cookies.Append(key: "jwt", value: token, new CookieOptions
                     {
                         HttpOnly = true
                     });
 
                     Response response = new Response { Status = true, Message = _LOGINSUCCESSFUL };
                     return Ok(response);

Program.cs:

 builder.Services.AddCors(p => p.AddPolicy("corsapp", builder =>
         {
             builder.WithOrigins("http://localhost:3000").AllowCredentials().AllowAnyMethod().AllowAnyHeader().AllowAnyMethod();
         }
     )
 );


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source