重定向被 CORS 策略阻止（React + SpringBoot）

Question

I have a basic react-app running on localhost:3000 .

That react-app makes an axios call to a SpringBoot app on localhost:9093 . The app on 9093 uses Spring MVC to return a redirect to another SpringBoot app on localhost:8183 . Finally, the app on 8183 returns a redirect back to the react-app on localhost:3000 .

When I try this, I get the following message in my chrome dev tools:

Access to XMLHttpRequest at 'http://localhost:3000/?err_code=inv_otk' (redirected from 'http://localhost:9093/saml?email=a@a.com') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

If the eventual destination as well as the origin are both on localhost:3000 , why am I getting issues?

Please let me know if more info is needed!

Answer 1

You may need @CrossOrigin annotation on your controller.

@RestController
@RequestMapping("/users")
@CrossOrigin
public class UserController {
    // doSomething();
}

Answer 2

The Access-Control-Allow-Origin error comes from an ajax call that is revoked by the browser whose name is OPTIONS call.

The browser when seeing the code wanna call an endpoint with a different URL of current origin try to call an OPTIONS call to know is it permitted to call it. so when the OPTIONS call won't successful the browser prevents from running whole the current code.

For the solution, you should try some ways to pass the OPTIONS call. one of them is inserting proxy inside your Webpack config and pass all OPTIONS call 200.

Another way is passing 200 answers for every OPTIONS calls on your backend project.

Also, you can switch-off your browser security just for the development area.

Answer 3

You can use this code in the application class. It will allow all the ports you will use in React JS. This has to be done in the Spring Boot Application class.

        /*****Cross Origin Implementation*****/
@Override
public void addCorsMappings(CorsRegistry registry) {
    registry.addMapping("/**")
    .allowedMethods("*")
    .allowedOrigins("*")
    .allowedHeaders("*")
    .allowCredentials(true);
}