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

问题

I was testing out the new API Gateway to secure a cloud function for my React application. So far the process has been much nicer than the previous alternatives, but I am currently getting CORS errors when trying to reach out to my API Gateway from my React app. I am setting the CORS headers correctly in my Cloud Function, but I have no known way of doing the same on the API Gateway endpoint. I am using Postman to test a request to the gateway endpoint and everything is working great, so it is just when I request from my React app.

Error: "Access to fetch at 'https://my-gateway-a12bcd345e67f89g0h.uc.gateway.dev/hello?key=example' from origin 'https://example.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

Would love some insight into this issue. Thanks!

回答1:

Turns out that API Gateway does not currently have CORS support.

Reference.

回答2:

I had the same issue and solve it with a load balancer (originally used to add a custom domain to my API gateway). I use my load balancer to add the missing header into the response.

You just need to add the "Access-Control-Origin" header:

Allow all

Access-Control-Origin:'*'

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

You can find the instructions here GCP - Creating custom headers.

If you do not have a load balancer implemented, you can follow this tutorial to implement a new one Google API Gateway, Load Balancer and Content Delivery Network.

You can find more information regarding CORS at https://www.w3.org/wiki/CORS_Enabled.

回答3:

This is not yet supported, however, there is a temporary workaround. Add the following to the paths in your openapi spec:

options:
  operationId: corsRequest
  x-google-backend:
    address: $CLOUD_FUNCTION_ADDRESS
  responses:
    '200':
      description: A successful response

On your backend, you must also handle the preflight request (source). This is an example backend Cloud Function:

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)

回答4:

I had similar issue with other API so I am not sure the same will work in your case but you can try - in react app when fetching the data, lets say with axios you can try

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

on the backend side - try this -

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

It works in my case , hope it will help you.

来源：https://stackoverflow.com/questions/64281334/cors-errors-when-trying-to-fetch-from-new-google-cloud-api-gateway

标签

reactjs

google-cloud-platform

google-cloud-functions

cors

google-cloud-api-gateway