GCP Cloud Run 和 Angular 上的 Flask 后端出现 CORS 错误

Question

我正在开发一个仪表板，前端使用 Angular，后端使用 MySQL 和 Flask。我已将数据库部署在 GCP Cloud Run 上的 CloudSQL 和 Flask 后端上。 在我的本地计算机上制作过程中，我遇到了以下错误：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我通过在本地 Flask 后端添加以下代码来修复它：

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

我还在 Flask 上的每个函数之前尝试了以下代码，它似乎在本地计算机上完美运行：

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://.app/api/login_users 该请求未经过身份验证。允许未经身份验证的调用或设置正确的授权标头。如需了解更多信息，请访问 https://cloud.google.com/run/docs/securing/authenticating 其他问题排查文档可在以下位置找到：https://cloud.google.com/run/docs/troubleshooting#unauthorized-client

这是我在浏览器中遇到的错误

访问 XMLHttpRequest 'https://.app/api/login_users' 来自 来源 'http://127.0.0.1:5555' 已被 CORS 策略阻止： 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

到目前为止我已经尝试过的事情：

1. 在 Flask 中添加了所有可能的 CORS 技术
2. 在 Cloud Run 上部署后，使用 POSTMAN 检查了我的 API，并在 python 请求中检查了它，它似乎工作得很好
3. 尝试构建我的 Angular 应用程序的生产版本来检查是否有可能是那边的问题。还包括“凭据”标头：

 const headers = {"Content-Type": "application/json",
  '授权'：this.auth_tok，'凭据'：'包含'}

4. 尝试使用 CURL 和 NodeJS 部署 GCP 服务。也与这些人一起工作过。所以只有 Angular 应用程序上的浏览器才会出现问题。

我已经被这个问题困扰好几天了。任何形式的帮助将不胜感激。谢谢

Answer 1

经过身份验证的调用不适用于 COR 请求，因为您的 Web 浏览器在向您的服务发送预检请求时不会发送所需的身份验证令牌。