spring boot with react frontend oauth2 proxy CORS issue

Question

I'm able to build my own oauth2 server following this example

I then created my own client side app with frontend being react. I specifically used facebook's create-react-app to get a quick start point.

I also found that in order to run the frontend in dev mode while connecting to backend api, I need to have a proxy added in the package.json file.

Now I have everything at hand:

The oauth2 server running on "localhost:8080"
The client app api running on "localhost:9090"
The frontend running in dev mode on "localhost:3000" with proxy set to connecting api port "9090"

When I try to connect to "localhost:3000", I always get the following error:

Failed to load http://localhost:9090/login: Redirect from 'http://localhost:9090/login' to 'http://localhost:8080/oauth/authorize?client_id=acme&redirect_uri=http://localhost:9090/login&response_type=code&scope=read%20write&state=qbV8P2' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

If I run "yarn build" and let spring boot serve the frontend static files, then if I access "localhost:9090", I will be properly redirected to the login page from the oauth2 server.

I've tried to allow "localhost:3000" by editing cors mapping from spring boot but this problem is still here.

As a side note, If I get authenticated by accessing "localhost:9090", and acquired the session cookie, then I can access protected resource by using "localhost:3000". It's just if I am not authenticated in the first place, then instead of being redirected to the login page, I always get the CORS error.

Any help would be appreciated.

Anadi Sharma · Accepted Answer · 2018-03-04 05:23:50Z

1

CORS is basically a way to determine if it is safe to grant access to restricted resource on a web page when requested from another domain. I am not sure, how does it works when you let spring boot serve your frontend static files. But you would simply have to grant permissions to your frontend server at http://localhost:3000 to access restricted resources at http://localhost:8080.

For e.g., if your request header looks like following:

Access-Control-Allow-Origin:http://localhost:3000
Access-Control-Request-Method: POST
Access-Control-Request-Headers: <your custom headers>

Then, server rules must be:

Access-Control-Allow-Origin:http://localhost:3000
Access-Control-Request-Method: POST, GET, DELETE, PUT
Access-Control-Request-Headers: <your custom headers>

Please note that keeping any parameter as * won't work.

Please let me know if it helps!

answered Mar 4, 2018 at 5:23

Anadi Sharma

2951 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AttitudeL Over a year ago

I have added "proxy": "localhost:9090" to package.json and it would be able to bypass CORS. It is true that once I got the session id from cookie by manually logging into my oauth2 server, I can do whatever from localhost:3000. But the problem is that somehow CORS happens during the oauth2 login page redirect if no authentication information is in the cookie in the first place.

Collectives™ on Stack Overflow

spring boot with react frontend oauth2 proxy CORS issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related