How to handle cookies on angular development server when getting info from another domain in Angular

Question

I've got a server to which I need to make posts, get, etc. with HTTPClient. This host is example.com:8080, for example. It's a tomcat with JSESSIONID Java cookie.

When I'm developing, I set the withCredentials: true on a interceptor for sending the cookies to the server. But, of course, I'm in localhost:4200

If I run the java server locally, i.e. at localhost:8080, after I log in the java application I get the cookie and, running angular dev server in another browser tab, the withcredentials feature is working fine, but now I can't run the java app on local, so I need to send my requests to example.com:8080, so of course it's not working because de domain does not match.

I tried to set server and local.server in my hosts file, but didn`t make the trick. I'm thinking about a kong api gateway or an nginx as reverse proxy, but seems to much complicated for what I want to do.

What is the best approach to make this to work?

Answer 1

Finally, I've made it with a really simple http proxy for node.js:

The library is on https://www.npmjs.com/package/http-proxy

This allows me to create a proxy on my localhost to go to example.com and also get rid of CORS problem!

The code is as follows:

const options = {
  target: "http://example.com:8080/",
  port: 5000,
};

const http = require("http");
const httpProxy = require("http-proxy");
const proxy = httpProxy.createProxyServer({});

const ignoreAccessControlHeaders = (header) =>
  !header.toLowerCase().startsWith("access-control-");

// Received a response from the target
proxy.on("proxyRes", (proxyRes, req, res) => {
  proxyRes.headers = Object.keys(proxyRes.headers)
    .filter(ignoreAccessControlHeaders)
    // Create an object with all the relevant headers
    .reduce(
      (all, header) => ({ ...all, [header]: proxyRes.headers[header] }),
      {}
    );

  // Override the response Access-Control-X headers
  if (req.headers["access-control-request-method"]) {
    res.setHeader(
      "access-control-allow-methods",
      req.headers["access-control-request-method"]
    );
  }
  if (req.headers["access-control-request-headers"]) {
    res.setHeader(
      "access-control-allow-headers",
      req.headers["access-control-request-headers"]
    );
  }
  if (req.headers.origin) {
    res.setHeader("access-control-allow-origin", req.headers.origin);
    res.setHeader("access-control-allow-credentials", "true");
  }
});

// Failed to send a request to the target
proxy.on("error", (error, req, res) => {
  res.writeHead(500, {
    "Content-Type": "text/plain",
  });
  res.end("Proxy Error: " + error);
});

var server = http.createServer(function (req, res) {
  proxy.web(req, res, {
    target: options.target,
    secure: true, // Verify the SSL Certs
    changeOrigin: true, // Set origin of the host header to the target URL
  });
});

console.log("listening on port", options.port);
server.listen(options.port);

works like a charm!

For rookies, this can be set as proxy.js and execute with:

node proxy.js

So your example.com:8080 will be proxied to localhost:5000 in this example.