GCP 云函数 HTTP 触发器"No 'Access-Control-Allow-Origin' header is present on the requested resource."错误

Question

我有一个带有HTTP触发器的GCP Cloud函数。我做了一个测试反应前端，它需要用HTTP请求触发这个函数。

以下是提出请求的代码：

async function handleSubmit() {
const url = 'https://us-central1-{project-id}.cloudfunctions.net/hello-test';
const data = {name:"Jane"};
const response = await fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: {
'Content-Type': 'application/json'
}
});
await response.json();
}

这是云功能：

def hello_http(request):
# Set CORS headers for preflight requests
if request.method == 'OPTIONS':
# Allows GET requests from origin http://localhost:3000 with
# Authorization header
headers = {
'Access-Control-Allow-Origin': 'http://localhost:3000',
'Access-Control-Allow-Methods': 'POST', #GET???
'Access-Control-Allow-Headers': 'Authorization',
'Access-Control-Max-Age': '3600',
'Access-Control-Allow-Credentials': 'true'
}
return ('test return value')
# Set CORS headers for main requests
headers = {
'Access-Control-Allow-Origin': 'http://localhost:3000',
'Access-Control-Allow-Credentials': 'true'
}
return ('another test return value')

以下是我从本地react应用程序运行此代码时遇到的错误：

Access to fetch at 'https://us-central1-{PROJECT-ID}.cloudfunctions.net/hello-test' 
from origin 'http://localhost:3000' 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.

当我使用时，这个云功能可以正常工作

curl -X POST HTTP_TRIGGER_ENDPOINT -H "Content-Type:application/json" -d '{"name":"Jane"}'

让这个请求处理作为POST请求发送的数据对象和从云函数返回的字符串的任何帮助都将解决我的问题。

谢谢。

编辑：curl-i-X OPTIONS｛url｝的结果

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization
Access-Control-Allow-Methods: POST
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Max-Age: 3600
Content-Type: text/html; charset=utf-8
Function-Execution-Id: roz4rhywam83
X-Cloud-Trace-Context: 9d52fb9b30e029f32c2a787ad0d006d2;o=1
Date: Thu, 21 Nov 2019 20:03:54 GMT
Server: Google Frontend
Content-Length: 15
Alt-Svc: quic=":443"; ma=2592000; v="46,43",h3-Q050=":443"; ma=2592000,h3-Q049=":443"; ma=2592000,h3-Q048=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000

Answer 1

这个解决方案对我有效：

const response = await fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
}).then(res => res.text());
console.log(response)
}

其中data是json对象，url是云函数url。

这就是云功能。

def app_run(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': '*',  # http://localhost:3000',
'Access-Control-Allow-Methods': 'POST',
'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 ('return value', 200, headers)