Right, so this solution is potentially horrible, but I feel it is necessary. The reasons being that:
- Trying to access the cookie through headers.('set-cookie') does not work, and returns null. I've attempted to rectify this through setting the expose headers option in my CORS filter on the server, however this still did not work.
- I need to be able to access the cookie value so I can save it to my domain's cookies, since this is a key step in specifying how long to retain the cookie for. Else, it expires at the end of the browsing session which is no good.
- Simply using with-credentials: true is not sufficient, as the cookie is then stored under the domain of my server, not the front end site. As such due to XSS protections, the cookie cannot be accessed by my site. I needed to be able to save the cookie to the site's storage, primarily due to what was outlined in reason two.
As such, here is what I did to resolve these issues.
On my server, I added a new custom header, "Authentication", to the response.
This can be done by adding the following to a response:
.header("Authentication", authToken)
(For example)
return Response.status(200).entity(message).header("Authentication", authToken).build();
Next, I needed to expose this custom header in my CORS filter.
Since I have a Java server, this is how my CORS filter looks:
@Provider
public class NewCrossOriginResourceSharingFilter implements ContainerResponseFilter {
@Override
public void filter(ContainerRequestContext requestContext, ContainerResponseContext response) {
response.getHeaders().putSingle("Access-Control-Allow-Origin", [My site]);
response.getHeaders().putSingle("Access-Control-Allow-Methods", "OPTIONS, GET, POST, PUT, DELETE");
response.getHeaders().putSingle("Access-Control-Allow-Headers", "Content-Type");
response.getHeaders().putSingle("Access-Control-Expose-Headers", "Authentication");
response.getHeaders().putSingle("Access-Control-Allow-Credentials", true);
}
}
Note that this won't work if directly copied and pasted, as you need to replace the [My site] value with your own domain, else your requests won't satisfy the CORS filter.
Finally, this now means that on the client side I can access the header "Authentication" easily as seen below.
.then(function(response) {
$scope.registrationOutcomeText = response.data;
console.log(response.headers("Authentication"));
}
From there I am able to access, store and retrieve the cookie in a manner that resolves all three of the issues initially identified at the start of the answer.
