Question

我可以在example

之后构建自己的oauth2服务器

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

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

现在我掌握了一切：

在＆＃34; localhost：8080＆＃34;
客户端应用api在＆＃34; localhost：9090＆＃34;
在＆＃34; localhost：3000＆＃34;上以开发模式运行的前端将代理设置为连接api端口＆＃34; 9090＆＃34;

当我尝试连接到＆＃34; localhost：3000＆＃34;时，我总是收到以下错误：

无法加载http://localhost:9090/login：重定向来自＆＃39; http://localhost:9090/login＆＃39;到＆＃39; http://localhost:8080/oauth/authorize?client_id=acme&redirect_uri=http://localhost:9090/login&response_type=code&scope=read%20write&state=qbV8P2＆＃39;被CORS政策阻止：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:3000＆＃39;因此不允许访问。

如果我跑步＆＃34;纱线制造＆＃34;让spring boot服务于前端静态文件，然后如果我访问＆＃34; localhost：9090＆＃34;，我将被正确地重定向到oauth2服务器的登录页面。

我试图允许＆＃34; localhost：3000＆＃34;通过编辑从春季启动映射的cors，但这个问题仍然存在。

作为旁注，如果我通过访问＆＃34; localhost：9090＆＃34;进行身份验证，并获得会话cookie，那么我可以使用＆＃34; localhost：3000＆＃34;来访问受保护资源。只是如果我没有首先进行身份验证，那么我总是得到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>

请注意，保留*的任何参数都不会有效。

请告诉我它是否有帮助！

spring boot with react frontend oauth2 proxy CORS issue

1 个答案: