Store session cookies and proxy

[matodrobec]

Hi, Session cookie is not set in browser when I am using proxy

ng serve --proxy-config proxy.conf.json

proxy config:

{
  "/api": {
    "target": "https://test.org",
    "secure": false
  }
}

javascript:

const body = new window.URLSearchParams();
body.set('username', credentials.username);
body.set('password', credentials.password);

let loginHeaders = new Headers();
loginHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

this.http
      .post(`http://localhost:4200/api/auth`, body.toString(), {
        headers: loginHeaders,
        withCredentials: true
      })

How can i set up proxy to store the session cookie in browser? What I am doing wrong?

OS?

Windows 10

Versions.

angular-cli: 1.0.0-beta.24
node: 6.9.1
os: win32 x64

[mmrath]

Not 100% sure if this will work, but did you try

"changeOrigin": true

{
  "/api": {
    "target": "https://test.org",
    "secure": false,
    "changeOrigin": true
  }
}

Also if you could provide all the headers received when you call the api, that will help investigate.

[hansl]

@matodrobec Please try mmrath's solution above to see if it works. If not, you can let me know and I'll re-open this issue. Thanks!

[matodrobec]

@mmrath Thx. I am tested your solution but it is still not working. The session cookie is not stored in browser and the server generate always new session cookie for each request.

My hotfix is

document.cookie = `JSESSIONID=${this.env.sessionCookie}; path=/`;

Now I ask provider api and I would like to use this solution
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Requests_with_credentials but do not forget read note in "Important note" about setting Access-Control-Allow-Origin

But also will be good to know how to set up proxy to store session cookies.

[avella-liaison]

I'm having the same exact problem, cookies set by the service aren't being set in the browser for subsequent calls.

My json looks like the following:

{
"/rest/*": {
"target": "http://localhost:8080/",
"changeOrigin": true,
"secure": true,
"logLevel": "debug"
}
}

I've tried with both secure true and false, neither helps. I've also started Chrome with the --disable-web-security flag

This is using Angular-cli@1.0.0-beta.21

[raviganesh12]

Any update on this issue?
I have the same problem the secure headers which are coming in the response form server are not send back in request after authentication.

[bheemanagouda]

I too have the same problem, JSESSIONID is not set in browser when api requests are proxied.
Any help is much appreciated.

[atpjd]

Same problem here. Angular CLI 1.0.0-rc.2

[gseabrook]

@hansl Is it possible to reopen this issue because its still a problem for some of us

[mmrath]

@gseabrook I have not looked deep enough but i think it is probably how webpack dev server proxy works. CLI uses webpack underneath, if you can provide a repo where it works with webpack for a similar setup, I might be able fix in CLI.

[tarun-nagpal-github]

Hi,

I have converted my project to CLI. But i am having this error while running proxy.

[HPM] Proxy created: /api -> https://test.org
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
[HPM] GET /api/generics-management/getCategoryList -> https://test.org
[HPM] Error occurred while trying to proxy request /api/generics-management/getCategoryList from localhost:4200 to https://test.org (ECONNREFUSED) (https://nodejs.org/api/erro...

Can you please help?

[ksondhi]

Hi,

We are currently experiencing the same issue. We are using Angular 2 with the the CLI (v2.4.10), with the proxy.conf.json. The session cookie is not being stored in the browser.

We do have the "changeOrigin": true value set, as suggested in this thread above. I see this issue has been closed. Does anyone have a fix?

Thanks!

CC: @hansl

[keithwinn]

Experiencing same problem. (cli v1.0.0). Can issue be re-opened?
Any suggestions for a workaround?

[zpc888]

I bumped into the same issue for our project and spent the whole day to tried different combinations, and finally make it works. Here is the summary to feedback to the community and hope it can save you a few hours.

when deploying AOT angular 4 project into the same tomcat container hosting backend restful API, the JSESSIONID is sent back after logged in. But when using proxy, to forward backend API from developer box webpack dev server to tomcat server, JSESSIONID is lost, tomcat treats every request is a new request. In webpack dev node server, we use http and tomcat server we use https, it looks like JSESSIONID can not carry over across http --> https. By setting breakpoint after login, try to get JSESSIONID cookie manually via browser debug console and it returns null, but in the login restful API, response header shows: Set-Cookie:JSESSIONID=EEE46B0120F10BA6939EAB2F8AD2CA44;path=/;Secure;HttpOnly

My initial tries to change our spring boot configuration: server.session.cookie.secure=false to hope it can force JSESSION not secure to UI, but it seems no effect if SSL is on.

Then tries to add response headers " Access-Control-xxx" at server side, and "withCredentials=true", "X-Forwarded-Proto=https" for angular request headers, and try to configure "cookieDomainRewrite" in proxy.config.json file, but none of them work.

At the end, I created a self signed cert with openssl and enable node dev server to HTTPS, it works perfectly, then I deleted server side response headers and client side request headers, it seems working fine too.

Here are the related factors for working version:

1. package.json
   "start": "ng serve --proxy-config proxy.api.json --ssl true --ssl-key ssl/server.key --ssl-cert ssl/server.crt",
2. proxy.api.json
   {
   "/api": {
   "target": "https://dit.server:8080",
   "secure": false,
   "logLevel": "debug",
   "changeOrigin": true
   },
   "/login": {
   "target": "https://dit.server:8080",
   "secure": false,
   "logLevel": "debug",
   "changeOrigin": true
   },
   "/logout": {
   "target": "https://dit.server:8080",
   "secure": false,
   "logLevel": "debug",
   "changeOrigin": true
   }
   }
3. request headers:
   let headers = new Headers();
   headers.append("Content-Type", "application/json");
   headers.append("Access-Control-Allow-Credentials", "true");
   headers.append("Access-Control-Allow-Origin", "*");
   headers.append("Cache-Control", "no-cache"); // due to IE browser caches API get requests
4. spring boot application.properties related to ssl
   server.port=8080
   server.ssl.key-store=file:///opt/app/dit.jks
   server.ssl.key-store-password=****
   server.ssl.key-password=****
5. no response headers added in our Http Servlet Filter class

[keithwinn]

zpc888's method worked. The key item was:

At the end, I created a self signed cert with openssl and enable node dev server to HTTPS, it works perfectly, then I deleted server side response headers and client side request headers, it seems working fine too.