带有反应前端oauth2代理CORS问题的春季启动

Question

我可以按照example 构建自己的 oauth2 服务器

然后，我创建了自己的客户端应用程序，前端正在响应。我专门使用了 facebook 的 create-react-app 来快速入门。

我还发现，为了在连接后端 api 的同时以 dev 模式运行前端，我需要在 package.json 文件中添加一个代理。

现在我手头有一切：

• 在“localhost:8080”上运行的 oauth2 服务器
• 在“localhost:9090”上运行的客户端应用 api
• 在“localhost:3000”上以开发模式运行的前端，代理设置为连接 api 端口“9090”

当我尝试连接到“localhost:3000”时，总是出现以下错误：

无法加载 http://localhost:9090/login：从“http://localhost:9090/login”重定向到“http://localhost:8080/oauth/authorize?client_id=acme&redirect_uri=http://localhost:9090/login&response_type=code&scope=read%20write&state=qbV8P2”已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此不允许访问 Origin 'http://localhost:3000'。

如果我运行“yarn build”并让spring boot为前端静态文件提供服务，那么如果我访问“localhost:9090”，我将被正确地从oauth2服务器重定向到登录页面。

我尝试通过从 Spring Boot 编辑 cors 映射来允许“localhost:3000”，但这个问题仍然存在。

附带说明，如果我通过访问“localhost:9090”获得了身份验证，并获得了会话 cookie，那么我可以使用“localhost:3000”访问受保护的资源。只是如果我一开始就没有经过身份验证，那么我总是会收到 CORS 错误，而不是被重定向到登录页面。

任何帮助将不胜感激。

Answer 1

CORS 基本上是一种确定在从另一个域请求时授予对网页上受限资源的访问权限是否安全的方法。我不确定，当你让 spring boot 为你的前端静态文件提供服务时它是如何工作的。但是您只需在http://localhost:3000 向您的前端服务器授予权限即可访问http://localhost:8080 的受限资源。

例如，如果您的请求标头如下所示：

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

那么，服务器规则必须是：

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

请注意，将任何参数保留为* 将不起作用。

如果有帮助请告诉我！