Before I ran into this problem, I thought everything should work smoothly. But now I'm facing an issue which I never thought of before.
I have two servers, one frontend and one backend. These two have different addresses; 192.168.2.10:8080
and localhost:4200
. The backend is implemented in Java+Spring and the frontend, it's Angualr2 (not that it matters but yet). And of course, I could easily serve them both from localhost and this is just for test. In fact, if I serve them both from localhost, I won't face the problem that I'm going to describe.
My backend has got CSRF enabled which means for every POST requests (and some other methods) it needs a cookie and a header to be present and match each other (XSRF-TOKEN
cookie and X-XSRF-TOKEN
header). The problem is that when I make Ajax calls to my backend server, the X-XSRF-TOKEN
is not populated properly.
When I open the POST request in Network tab, I can see that the cookie is sent to the backend server as it should. But yet, there's no X-XSRF-TOKEN
header accompanying the request.
And yes, I've set the withCredentials
property to true. As I said, everything works fine if both servers share the same IP address. I think the problem is that since the cookie is set for a different address, the XMLHttpRequest object can not access it to include it as a header, which is a bummer to me.
So, is it possible to serve a frontend by a backend from a totally different IP address having CSRF enabled and without using a proxy?