Spring Boot與React前端oauth2代理CORS問題

Question

我可以按照以下示例構建自己的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”標頭。 因此，不允許訪問源' 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>

請注意，將任何參數都保留為*無效。

請讓我知道是否有幫助！