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

Question

我有一個基本的 react-app 在localhost:3000上運行。

該 react-app 對localhost:9093上的 SpringBoot 應用程序進行 axios 調用。 9093上的應用程序使用 Spring MVC 將重定向返回到localhost:8183上的另一個 SpringBoot 應用程序。 最后， 8183上的應用程序將重定向返回到localhost:3000上的 react-app。

當我嘗試這個時，我在我的 chrome 開發工具中收到以下消息：

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.

如果最終目的地和原點都在localhost:3000 ，為什么我會遇到問題？

如果需要更多信息，請告訴我！

Answer 1

您可能需要在控制器上添加 @CrossOrigin 注釋。

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

Answer 2

Access-Control-Allow-Origin錯誤來自一個 ajax 調用，該調用被名為OPTIONS調用的瀏覽器撤銷。

瀏覽器在看到代碼想要調用具有當前來源的不同 URL 的端點時嘗試調用OPTIONS調用以了解是否允許調用它。 所以當OPTIONS調用不成功時，瀏覽器會阻止運行整個當前代碼。

對於解決方案，您應該嘗試一些方法來傳遞OPTIONS調用。 其中之一是在您的 Webpack 配置中插入代理並傳遞所有OPTIONS調用 200。

另一種方法是為后端項目中的每個OPTIONS調用傳遞 200 個答案。

此外，您可以僅為開發區域關閉瀏覽器安全性。

Answer 3

您可以在應用程序類中使用此代碼。 它將允許您將在 React JS 中使用的所有端口。 這必須在 Spring Boot Application 類中完成。

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