Alert: I Change the spelling of some keywords cos it sends it into spam.

I am working on a project on which I need to keep backend as spring boot and frontend as Angular 8 . Now when I send a request through postman on url:

http://localhost:8080/login

postman response http://mahiransh.me/stack/1.png

Now, I try to send another request after successful login of user on url:

http://localhost:8080/getUserAge

postman get user age http://mahiransh.me/stack/2.png

value stored for that cookie:

get user age cookie value http://mahiransh.me/stack/3.png

It shows me the desired output... having same SESSION and also frontend side response header has not the parameter Set-Cookie

Now postman work is definately fine.

Here is the problem:

When I try same thing with angular...

Login with angular

angular login http://mahiransh.me/stack/4.png

User logged in successfully and similar like postman, a new header response pass for Set-Cookie SESSION=... which is highlighted in the above image.

But when I call the API /getUserAge

angular get user age http://mahiransh.me/stack/5.png

It sends another response header for Set-Cookie with the new value of SESSION=..., but it is not happening in postman.

I want the things to go like postman, one I logged in into the application, set-cookies gives SESSION=..., and after that whole application work with that SESSION, not every time send a new response hadar for each different post request.

This is my angular code to send a request for login:

// this method is use to login user   
public loginUserFromRemote(cr: Credential): Observable<any> {
     return this._http.post("http://localhost:8080/login", cr, {responseType: 'text'})   
}

This is my angular code to send a request for getUserAge:

// this method is return the age of user trough credential type agruments   
public getUserAge(cr: Credential): Observable<any> {     
     return this._http.post("http://localhost:8080/getUserAge", {}, {responseType: 'text'})   
}

Both of the methods have a Credential type object which passes email and password as shown in the above images.

Note: - I have already done the cors policy for the application.

- Session is saved in the backend, so getUserAge method in the backend takes the value of user ID from the backend session, only we need to keep frontend session same. I know that I pass {} (empty) object in getUserAge method because it works in postman.

- I got internal server error 500 which is obvious because when I passed same {} in getUserAge without login, so set-cookie is response header is newly passed and gave an error. While first I login and then passes {} in getUserAge, I got desired output in postman, but not in angular because it sends another response header for that post request (getUserAge).

Hope you understand what I want to explain and what issue I am facing. Let's discuss this and try to solve the issue as earlier as possible.

I try to change the request parameters as:

public loginUserFromRemote(cr: Credential): Observable<any> {
    return this._http.post("http://localhost:8080/login", cr, {
      headers:({
      'Content-Type': 'json',
      'Access-Control-Allow-Origin': 'http://localhost:8080/login',
      'Access-Control-Allow-Headers': 'Content-Type',
      'Access-Control-Allow-Methods': 'POST',
    }),
      responseType: 'text'
    })
  }

but it does not work for me.

And when trying to add, withCredential:true, after responseType:'text', it gave error :

Changed to:

    // this method is use to login user
      public loginUserFromRemote(cr: Credential): Observable<any> {
        return this._http.post("http://localhost:8080/login", cr, {
          headers:({
          'Content-Type': 'json',
          'Access-Control-Allow-Origin': 'http://localhost:8080/login',
          'Access-Control-Allow-Headers': 'Content-Type',
          'Access-Control-Allow-Methods': 'POST',
        }),
          responseType: 'text',
          withCredentials:true
        })
      }

Error:

Access to XMLHttpRequest at 'http://localhost:8080/login' from origin 
'http://localhost:4200' has been blocked by CORS policy: Response to
 preflight request doesn't pass access control check: The value of the
 'Access-Control-Allow-Credentials' header in the response is '' which must
 be 'true' when the request's credentials mode is 'include'. The credentials
 mode of requests initiated by the XMLHttpRequest is controlled by the
 withCredentials attribute.