问题
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