How to make a cross domain request and send cookies with the request

Question

I'm developing 2 applications for backend and frontend (spring mvc and angular4), i host the spring app on tomcat server using the http port (8080) and my frontend using the http port (4200) , the communication between both of the apps is made using json. To identify the user i'm using a session cookie.

The problem is that i came to a cross domain issue because i use different ports for both of the apps, the cookie is not send when i make a http post request.

the only solution i found until now : When i put the angular app inside the /src/main/webapp of my spring project, following this documentation , i dont have the issue and the cookie are automatically set but it's painful to do the previous steps everytime when i want to test something.

I thought also about some workaround like jsonp during the development process but i don't think this would be productive plus later on i need to execute some e2e testing.

Did anyone have an idea/example about how to make this cross domain...

Answer 1

So after some researches i came out with this solution : in term of security and scalability of my backend service the best way is to use CROS, any other solutions like JSONP, Proxy is just a workaround and this will bring nothing because of the same-origin-policy followed by browsers

Following this documentation the scenario that will happens : 1) the browser will send an OPTIONAL request 2) the server will response with the allowed origin 3) if the our domain(the frontend domain/ angular app in my case) is verified the cookies will be automatically send in another request

the implementation that i made : in the spring app :

//Some logic before this
if ("OPTIONS".equals(request.getMethod())) {
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        response.setHeader("Access-Control-Allow-Credentials","true");
        response.setHeader("Access-Control-Allow-Methods","POST");
        response.setHeader("Access-Control-Allow-Headers","Content-Type");

        response.setStatus(HttpServletResponse.SC_OK);
        ((HttpServletResponse) servletResponse).setHeader("Access-Control-Allow-Origin", "http://localhost:4200");
        return ;
    }
// some logic after this

in the front app we can send the request using xhr like it's described in the attached link.