尝试从新 Google 云 API 网关获取时出现 CORS 错误

Question

我正在测试新的 API 网关来保护我的 React 应用程序的云功能。到目前为止，这个过程比以前的替代方案要好得多，但是当我试图从我的 React 应用程序访问我的 API 网关时，我目前遇到了 CORS 错误。我在我的 Cloud Function 中正确设置了 CORS headers，但我不知道如何在 API 网关端点上执行相同的操作。我正在使用 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

我和其他 API 有类似的问题，所以我不确定你的情况是否同样有效，但你可以尝试 - 在 React 应用程序中获取数据时，假设你可以尝试使用 axios

    axios.post('http://localhost:3003/signup',this.data,{headers:{'Access-Control- 
    Allow-Origin':'*','Content-Type': 'application/json'}})

在后端 - 试试这个 -

  let cors=require('./cors')
  app.options('*', cors());

在我的情况下有效，希望对您有所帮助。

Answer 2

原来 API 网关目前不支持 CORS。

Reference.

Answer 3

我遇到了同样的问题并使用负载均衡器解决了它（最初用于向我的 API 网关添加自定义域）。我使用负载均衡器将缺少的 header 添加到响应中。

您只需添加“Access-Control-Origin”header:

Allow all

Access-Control-Origin:'*'

Allow a specific origin Access-Control-Allow-Origin: http://example.com:8080

您可以在此处找到说明 GCP - Creating custom headers。

如果您没有实施负载均衡器，你可以按照本教程来实现一个新的 Google API Gateway, Load Balancer and Content Delivery Network.

您可以在 https://www.w3.org/wiki/CORS_Enabled 找到更多关于 CORS 的信息。

Answer 4

这还不受支持，但是，有一个临时的解决方法 可以使它正常工作。您应该将 options 添加到 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

然后，在您的云函数后端中，您还必须处理预检请求 (source)。 Google 文档还提供了一个示例 with authentication，其中有一些额外的 headers。这是一个没有认证的例子：

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 网关未以适当方式管理预检请求的缺点导致运行云函数两次受到惩罚。但是您的第二个请求应该总是非常快，因为第一个请求充当预热请求。

Answer 5

swagger: "2.0"
host: "my-cool-api.endpoints.my-project-id.cloud.goog"
x-google-endpoints:
- name: "my-cool-api.endpoints.my-project-id.cloud.goog"
  allowCors: True

Note: host and name should have the same API endpoint name

在配置文件中配置这些行可为 API GATEWAY

启用 CORS

[参考][1]

[1]: https://cloud.google.com/endpoints/docs/openapi/support-cors#:~:text=CORS%20(Cross%2Dorigin%20resource%20sharing,would%20prevent%20cross%2Dorigin% 20 个请求。

Answer 6

解决方案

这是解决方案。正如 user14982714 所述。将主机和 x-google-endpoints 添加到顶层的 oepnapi.yaml 文件：

host: my-cool-api.endpoints.my-project-id.cloud.goog
x-google-endpoints:
- name: my-cool-api.endpoints.my-project-id.cloud.goog
  allowCors: True

但是，请务必将 my-cool-api.endpoints.my-project-id.cloud.goog 替换为您的 API 托管服务 URL。这可以在 API 网关 API 下的 google 云控制台中找到：

出于隐私考虑，我覆盖了端点名称的开头，但是，您的端点名称也应以 .cloud.goog 结尾。如果您尚未部署配置，请在没有 x-google-endpoints 和主机的情况下部署它，然后更新它以包含两者。（要更新您的配置，请转到 API 网关 -> 您的 API -> 网关选项卡 -> 您的网关 -> 编辑 -> 更改 API 配置 -> 新建）

说明

现在解释为什么这适用于 Google 云 API 网关。 API 网关在后台使用端点。大多数人不知道是这种情况，但是，在放弃 API 网关并返回端点后，我注意到我的 API 网关列在端点服务下。它们不会显示在 UI 中，但使用 gcloud CLI 运行此命令 gcloud endpoints services list 并且您应该会看到 API 网关。疯狂的！但是 Google 经常这样做。

所以知道这一点后，我尝试将 allowCors: true 添加到 x-google-endpoints 和中提琴。有效。我希望这可以帮助那里的人。

尝试从新 Google 云 API 网关获取时出现 CORS 错误

CORS errors when trying to fetch from new Google Cloud API Gateway

cors

reactjs

google-cloud-platform

google-cloud-functions

google-cloud-api-gateway