Why does my set-cookie erases after I do a subsequest request

Question

The problem is that when I log in using a endpoint, it return in the response header a set-cookie which is a http only cookie, but when I do other requests for other endpoints, I don't see the set-cookie in the request headers, I have tried to fix this issue

below is the angular code inside a service.ts,

private apiUrl = environment.baseUrl +  '/api/v1/login';
private apiUrl2 = environment.baseUrl + '/api/v1/anotherRequest';
login(req: Login): Observable<string> {
    const headers = new HttpHeaders({'Content-Type': 'application/json'});
    return this.httpClient.post<string>(this.apiUrl,JSON.stringify(req),{ headers })
  }
anotherRequestBeingMade(): Observable<any]> {
    const headers = new HttpHeaders({'Content-Type': 'application/json'});
   
    return this.httpClient.get<any>(this.apiUrl2,{withCredentials:true})
  }

this is how I set up my http only cookie in fiber using golang

cookie := fiber.Cookie{
        Name:     "my_cookie",
        Value:    *thereisavaluehere,
        Expires:  time.Now().Add(time.Hour * 24),
        HTTPOnly: true,
        Secure:   true,
        SameSite: "None",
        Path:     "/",
    }

    c.Cookie(&cookie)

I test it on Postman, and it sets the cookie on the login endpoint which has the response header Set-Cookie. When doing the subsequent request it shows on the request header Cookie but when I tested on the Angular client, Set cookies is still present when doing the login endpoint but the Cookie header is not available in subsequent request.

What I have tried:

• I have included the {withCredentials:true} inside the get httpClient

• I have tried fixing the cors issue in my backend which is written in golang

  app.Use(cors.New(cors.Config{
       AllowOrigins:     "http://localhost:4200",
       AllowHeaders:     "Origin, Content-Type, Accept",
       AllowMethods:     "GET, POST, PUT, DELETE, OPTIONS",
       ExposeHeaders:    "Set-Cookie",
       AllowCredentials: true,
   }))

• Tried the bypass proxy by creating a proxy.conf.json in the same level as the package.json and configured the package.json script object, section start with

"start": "ng serve --proxy-config proxy.conf.json",

{
"/api/*": {
  "target": "http://localhost:8080",
  "secure": false,
  "logLevel": "debug"
}
}

Then I added a enviroment.ts file in the src folder of the angular app which has

export const environment = {
    production: false,
    baseUrl: 'http://localhost:8080' // Adjust this to match your backend server URL
  };

Thank you in advance

Answer 1

I missed the fact that I left out the withcredentials:true to the httpclient on my login api

login(req: Login): Observable<string> {
    const headers = new HttpHeaders({'Content-Type': 'application/json'});
    return this.httpClient.post<string>(this.apiUrl,JSON.stringify(req),{headers,withCredentials:true})
  }