spring boot with react前端oauth2代理CORS问题

Posted 2021-05-03

我可以在这个example之后构建我自己的oauth2服务器

然后我创建了自己的客户端应用程序，前端正在做出反应。我特意使用facebook的create-react-app来获得快速起点。

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

现在我掌握了一切：

• 运行在“localhost：8080”上的oauth2服务器
• 运行在“localhost：9090”上的客户端应用程序api
• 在“localhost：3000”上以dev模式运行的前端，代理设置为连接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'标头。因此，'http://localhost:3000'原产地不允许进入。

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

我试图通过编辑弹簧启动的cors映射来允许“localhost：3000”，但这个问题仍然存在。

作为旁注，如果我通过访问“localhost：9090”进行身份验证，并获取了会话cookie，那么我可以使用“localhost：3000”访问受保护资源。只是如果我没有首先进行身份验证，那么我总是得到CORS错误，而不是被重定向到登录页面。

任何帮助，将不胜感激。

答案

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>

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

请告诉我它是否有帮助！