Search code examples
angularnpmlite-server

Angular2 with lite-server does not attach custom headers or cookies

I have a REST backend running on localhost:8080 that issues a cookie when the user logs in. I have a Angular2 front end packaged in with the backend. When I run the project, angular sends the cookie and attaches the custom header to the requests to the backend. However, when I run the front end using the list server one localhost:3000, angular does not send any cookies and does not attach the custom header.

Request when running with backend:

Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Cookie:io=8Dk6ajOQZyDz-bvXAAAB; jwt=eyJh...H1aCccT2U
Host:localhost:8080
Referer:http://localhost:8080/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36
X-CSRF-Token:2c8744ff-38ad-49cb-bf07-fe75cd16f827

Running with lite-server and apache2

Accept:*/*
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:x-csrf-token
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:8080
Origin:http://localhost:3000
Referer:http://localhost:3000/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.76 Safari/537.36

From what I read, cookies are not port specific, and therefore should be sent with a request from localhost:3000 and localhost:8080.

I have a CORS filter on the backend to accept all requests from any origin.

  1. Why aren't headers being attached?
  2. Why aren't the cookies being attached?
Solution

  • The issue isn't related to the lite-server. Whenever you run a front-end on a different port/domain than the back-end you will need to explicitly allow for certain behaviors to happen, such as setting a cookie or allowing a header to be read.

    To get cookies set by the back-end to be stored in the browser, the angular request must have be sent with withCredentials, which attaches the following header to the request.

    Access-Control-Allow-Credentials:true

this.http.post(this.loginUrl,
        JSON.stringify({ username: username, password: password }),
        {headers: this.headers, withCredentials: true})...

    I've setup an HTTP Service wrapper that attaches this to each request.

    For angular to read a custom header sent by the back-end, CORS needs to send the following header:

    Access-Control-Expose-Headers:X-CUSTOM-HEADER

    Only then will it be exposed to the angular. Hope this helps someone.