CORS GCP Cloud Run 后端 Flask 錯誤和 Angular

Question

我正在開發一個儀表板，前端為 Angular，后端為 MySQL 和 Flask。我已經在 CloudSQL 上部署了數據庫，在 GCP Cloud Run 上部署了 Flask 后端。 在我的本地計算機上生產期間，我遇到了這個錯誤：

對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”header。

我通過在本地將以下代碼添加到我的 flask 后端來修復它：

from flask_cors import CORS
CORS(app, resources={r"*": {"origins": "*"}})

我還在 flask 上的每個 function 之前嘗試使用以下代碼，它似乎在本地計算機上完美運行：

from flask_cors import cross_origin
@app.route('/api/register_smartbox', methods=['POST'])
@cross_origin()
def register_smartbox():
    recv_req = request.get_json()

主要問題發生在我將它部署到 GCP Cloud run 上時。 我在那里使用經過身份驗證的調用。 以下是我在 Angular 應用程序中從瀏覽器發送 API 請求時在雲運行日志中獲得的日志：

警告 2022-02-24T06:14:41.430198ZOPTIONS4030 B0 msChrome 98 https://<My_URL>.app/api/login_users 請求未通過身份驗證。 允許未經身份驗證的調用或設置正確的授權 header。在 https 閱讀更多內容://cloud.google.com/run/docs/securing/authenticating可以在以下位置找到其他故障排除文檔： https://cloud.google.com/run /docs/troubleshooting#unauthorized-client

這是我在瀏覽器中遇到的錯誤

從來源“http://127.0.0.1:5555”訪問位於“https://<My_URL>.app/api/login_users”的 XMLHttpRequest 已被 CORS 策略阻止：對預檢請求的響應未通過訪問控制檢查: 請求的資源上不存在“Access-Control-Allow-Origin”header。

到目前為止我嘗試過的事情：

1. 在 Flask 中添加了所有可能的 CORS 技術
2. 在 Cloud Run 上部署后，使用 POSTMAN 和 python 請求檢查了我的 API，它似乎運行良好
3. 嘗試構建我的 angular 應用程序的生產版本，以檢查該方面是否存在問題。 還包括“憑證”header：

 const headers = {"Content-Type": "application/json", 'Authorization': this.auth_tok, "credentials": 'include'}

4. 使用 CURL 和 NodeJS 嘗試部署的 GCP 服務。 也與那些人一起工作。 因此只有 Angular 應用程序上的瀏覽器才會出現問題。

幾天來我一直被這個問題困擾。 任何形式的幫助將不勝感激。 謝謝

Answer 1

經過身份驗證的調用不適用於 CORs 請求，因為您的 web 瀏覽器在向您的服務發出預檢請求時未發送所需的身份驗證令牌。