How to access cookies in angular UI set by backend running on different port

Question

Please find my below use case:

There is a backend web service developed in Java running at http://localhost:8080 and an angular UI application running at http://localhost:4200. Now my requirement is on successful login, Backend service sets cookies in the response object.

After that, all subsequent requests from UI to the backend service should be content set cookies by the backend service.

Issue:

As the backend is running on a different port, UI is not able to read the cookies and all subsequent requests from UI to the backend is not containing cookies.

Could anyone please help me with this issue?

Answer 1

For production you should use nginx or Apache in order to work on the same port.

For development you can define a path for backend, for example /api/ and tell Angular redirect all requests to this path to your backend server(on another port) this look like

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": true
  }
}

Official guide https://angular.io/guide/build#proxying-to-a-backend-server

Another one https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/