reactjs - 尝试从新的 Google Cloud API Gateway 获取时出现 CORS 错误

Question

我正在测试新的 API 网关，以保护我的 React 应用程序的云功能。到目前为止，该过程比以前的替代方案要好得多，但是当我尝试从我的 React 应用程序访问我的 API 网关时，我目前遇到了 CORS 错误。我在 Cloud Function 中正确设置了 CORS header ，但我不知道在 API Gateway 端点上执行相同操作的方法。我正在使用 Postman 测试对网关端点的请求，并且一切正常，所以这正是我从 React 应用程序请求时。
错误:“从源“https://example.netlify.app”获取“https://my-gateway-a12bcd345e67f89g0h.uc.gateway.dev/hello?key=example”的访问权限已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin” header 。如果不透明响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用了 CORS 的资源。”
希望对这个问题有所了解。谢谢!

Answer 1

目前还不支持，但是有一个临时的 解决方法 让这个工作。您应该添加 options到您的 openapi.yaml 中的路径.此外，get和 options操作应该指向相同的云函数，因为 options request 然后充当云功能的预热请求。就延迟而言，这是最有效的设置。这是一个简化的示例:

paths:
  /helloworld:
    get:
      operationId: getHelloWorld
      x-google-backend:
        address: $CLOUD_FUNCTION_ADDRESS
      responses:
        '200':
          description: A successful response
    options:
      operationId: corsHelloWorld
      x-google-backend:
        address: $CLOUD_FUNCTION_ADDRESS
      responses:
        '200':
          description: A successful response

然后，在您的云函数后端，您还必须处理预检请求 ( source )。 Google 文档还提供了一个示例 带认证 ，它有一些额外的标题。这是一个没有身份验证的示例:

def cors_enabled_function(request):
    # For more information about CORS and CORS preflight requests, see
    # https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
    # for more information.

    # Set CORS headers for the preflight request
    if request.method == 'OPTIONS':
        # Allows GET requests from any origin with the Content-Type
        # header and caches preflight response for an 3600s
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET',
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Max-Age': '3600'
        }

        return ('', 204, headers)

    # Set CORS headers for the main request
    headers = {
        'Access-Control-Allow-Origin': '*'
    }

    return ('Hello World!', 200, headers)

注意:API 网关没有以适当的方式管理预检请求的缺点会导致两次运行云功能的惩罚。但是您的第二个请求应该总是非常快，因为第一个请求充当预热请求。