试图从新的Google Cloud API网关获取CORS错误

Question

我正在测试新的API网关，以保护React应用程序的云功能。到目前为止，这个过程比以前的替代方案要好得多，但我目前在试图从React应用程序访问API网关时遇到了CORS错误。我在云函数中正确地设置了CORS头，但我没有在API网关endpoint上做同样事情的方法。我正在使用Postman测试对网关endpoint的请求，一切都很好，所以这正是我从React应用程序请求的时候。

错误：“从'https://my-gateway-a12bcd345e67f89g0h.uc.gateway.dev/hello？key=example'获取资源的访问权限'https://example.netlify.app'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上没有'Access-Control-Allow-Origin'标头。如果不透明的响应满足您的需要，请将请求模式设置为'no-cors'以获取禁用CORS的资源。”

希望对这个问题有所了解。谢了！

Answer 1

这还不受支持，但是，有一个临时的解决方案来使其工作。您应该向openapi.yaml中的路径添加选项。此外，get和options操作都应该指向同一个云函数，因为options请求充当云函数的预热请求。就延迟而言，这是最有效的设置。下面是一个简化的例子：

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

然后，在您的云函数后端，您还必须处理飞行前请求（源）。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网关不以适当的方式管理预请求的缺点会导致云函数运行两次。但是您的第二个请求应该总是非常快，因为第一个请求充当热身请求。