Run FE and BE on 2 different URLs

[avi613]

Hi,

I'm trying to get into Spring Security and Angular. The present tutorial has been my entry point and has taught me much. I thank you for this.

Unfortunately, I have not been able to run it "as is" because of too much conflicting configuration.

Therefore, i have been trying to run this tutorial but with a different set-up. As far as my understanding goes, the major difference between this tuto and what I am trying to do is that I have two different projects running on two different URLs :

• a Front End project running on http://localhost:4200
• a Back End project running on http://localhost:8080

I have come over all the CORS problems by adding the right filters to my Spring Boot class. Without Spring Security, I can make it work.

However, when Spring Security is added, that is by adding the dependency in the pom.xml, I cannot seem to ever reach the login screen, even with the most basic set-up.

Here is the behaviour:

When I go to http://localhost:8080/resource with my browser, then I am correctly redirected to http://localhost:8080/login, I'm able to login, everything is great.

When I go to http://localhost:4200 with my browser, I can never be redirected to http://localhost:8080/login, although I can see all the dialog in the DEBUG log of Spring Boot, saying I should be redirected to the login URL.

I know I'm so close. But I cannot seem to find what I am missing.

I'm going to post snippets of code shortly, but maybe you already see what's wrong with what I am doing.

Could you please help me (I know I sound like the Beatles.... 😋 )

[dsyer]

Unless your front end app is using Spring, there's no easy way for it to redirect to the back end login, and that's probably not the way you want to deploy the app in production, so why do it that way at dev time? If I were you I would persevere a bit with the original layout of the project (there's a reason we did it that way). You mentioned "conflicting configuration" but weren't very specific about that. It all works for me, so maybe you just need to make some small changes on your side. If you copy the code directly from github and run it with mvn spring-boot:run it should work.

[avi613]

First of all, thx so much for answering!

I'm working in an enterprise context. I have "some" freedom to choose and install my tools, but not all of them. Here, I'm really talking about nodeJS.
I have tryed to tweak the configuration to match my requirements, but mvn spring-boot:run did not detect that it was already installed on my desktop (unsurprisingly) and tryed to fetch it from the web, which utterly failed, because I cannot go over a proxy.

That's for one.

Yet I have another constraint: a major requirement of my application is that the FE and BE should run on 2 different URLs. So I guess I will have to implement the login logic programmatically. I belive that I have done so before, because I have pushed this tutorial a bit further, but I the time, I did not implement the CORS filters for the /login end-point.
This is probably where I failed.

[avi613]

I have posted a stackoverflow question.

I know this isn't much, and it is definitely not where I'm going in terms of security. But my idea is to understand simple things before going for the more complexe ones.

My understanding as of today is that my back-end is OK, but I cannot produce a correct http GET query with Angular.

[avi613]

Dear Dave,

I have eventually found my error: the psring sec bit should have contained the CORS configuration:

http
    ...
    .and()
    .cors()
    ...
I have posted my answer in the stack above.