Access-Control-Allow-Origin 不工作 Google Cloud Functions GCF
Access-Control-Allow-Origin not working Google Cloud Functions GCF
我在这里感觉像个新手,但我正在尝试 运行 来自浏览器的简单 AJAX 请求以访问 GCF,并且 Chrome 正在报告:
XMLHttpRequest cannot load
https://us-central1-bustling-opus-830.cloudfunctions.net/Authenticate.
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'https://beast.reachboarding.com.au' is therefore not
allowed access.
我有一个名为 Authenticate 的函数(如上所示),它使用一个名为:
的存储桶
bustling-opus-830.appspot.com
我使用 gsutil 通过以下 JSON 文件设置 CORS:
[{
"origin": ["https://beast.localdev.com.au","*"],
"responseHeader": ["Content-Type"],
"method": ["GET", "HEAD", "DELETE", "OPTIONS"],
"maxAgeSeconds": 3600
}]
使用以下命令:
gsutil cors set cors.json gs://bustling-opus-830.appspot.com/
然后从相应的get命令得到如下输出:
gsutil cors get gs://bustling-opus-830.appspot.com/
[{"maxAgeSeconds": 3600, "method": ["GET", "HEAD", "DELETE", "OPTIONS"], "origin": ["https://beast.localdev.com.au", "*"], "responseHeader": ["Content-Type"]}]
我使用的是在您创建新函数时提供的默认示例代码,如下所述:
/**
* Responds to any HTTP request that can provide a "message" field in the body.
*
* @param {!Object} req Cloud Function request context.
* @param {!Object} res Cloud Function response context.
*/
exports.helloWorld = function helloWorld(req, res) {
// Example input: {"message": "Hello!"}
if (req.body.message === undefined) {
// This is an error case, as "message" is required.
res.status(200).send('No message defined!');
} else {
// Everything is okay.
console.log(req.body.message);
res.status(200).send(req.body.message);
}
};
还有一个简单的 HTML 和下面的 Javascript:
$.ajax({
url: "https://us-central1-bustling-opus-830.cloudfunctions.net/Authenticate",
type: "POST",
data: {
message: 'Testing'
},
dataType: 'json',
success: function (response) {
console.log(response);
},
error: function (xhr, status) {
console.log(xhr);
}
});
导致错误的原因。
在我的 DEV 控制台中,我可以看到网络请求通过。这是我得到的 HTTP 响应 Headers:
cache-control:private
content-encoding:gzip
content-length:27
content-type:text/html; charset=utf-8
date:Wed, 08 Feb 2017 03:45:50 GMT
etag:W/"7-274e639a"
function-execution-id:azc1zqfb1tq8
server:Google Frontend
status:200
vary:Accept-Encoding
x-cloud-trace-context:70e08d634a9644c32530326de0471a64;o=1
x-cloud-trace-context:70e08d634a9644c32530326de0471a64
x-powered-by:Express
我本来希望在响应 Headers 中看到 Access-Control-Allow-Origin header 以表明它允许 * 但我绝对没有看到它。
但疯狂的是,当我查看“网络”项并单击“响应”时,我得到:
Testing
这表明所有事情都是平等的,实际上 运行!
如果之前有人回答过这个问题,我深表歉意,但我已经搜索了很多不同的关键字,但似乎都没有解决我的问题。我认为对这个问题有新的看法(以及一些不错的专业知识)会有所帮助。
提前致谢!
您的前台 (HTTP) Google Cloud Function 需要在对 AJAX 客户端请求的响应中设置适当的 CORS headers。 HTTP Functions 的请求和响应参数与相应的 ExpressJS objects 具有等效的属性,可用于设置 CORS headers 并根据需要响应预检请求。
例如:
exports.Authenticate = function Authenticate (req, res) {
//set JSON content type and CORS headers for the response
res.header('Content-Type','application/json');
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type');
//respond to CORS preflight requests
if (req.method == 'OPTIONS') {
res.status(204).send('');
}
//continue function ...
};
应该修改上面的 headers 和逻辑以反映您服务的特定需求,但希望能帮助您入门。
如果您仍然对答案感兴趣,我实际上写了一篇关于如何使用 Express 中间件处理该问题的博客 post:https://mhaligowski.github.io/blog/2017/03/10/cors-in-cloud-functions.html。
您也可以使用 cors
包来解决这个问题,正如 Google 所推荐的那样。事实上,他们也在自己的示例代码中使用了这个。检查此 example。
这是代码 -
const cors = require('cors')({
origin: true,
});
//Your code here
//Use the following function instead of just res.send. return keyword is not compulsory here
return cors(req, res, () => {
res.send();
});
我在这里感觉像个新手,但我正在尝试 运行 来自浏览器的简单 AJAX 请求以访问 GCF,并且 Chrome 正在报告:
XMLHttpRequest cannot load https://us-central1-bustling-opus-830.cloudfunctions.net/Authenticate. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://beast.reachboarding.com.au' is therefore not allowed access.
我有一个名为 Authenticate 的函数(如上所示),它使用一个名为:
的存储桶bustling-opus-830.appspot.com
我使用 gsutil 通过以下 JSON 文件设置 CORS:
[{
"origin": ["https://beast.localdev.com.au","*"],
"responseHeader": ["Content-Type"],
"method": ["GET", "HEAD", "DELETE", "OPTIONS"],
"maxAgeSeconds": 3600
}]
使用以下命令:
gsutil cors set cors.json gs://bustling-opus-830.appspot.com/
然后从相应的get命令得到如下输出:
gsutil cors get gs://bustling-opus-830.appspot.com/
[{"maxAgeSeconds": 3600, "method": ["GET", "HEAD", "DELETE", "OPTIONS"], "origin": ["https://beast.localdev.com.au", "*"], "responseHeader": ["Content-Type"]}]
我使用的是在您创建新函数时提供的默认示例代码,如下所述:
/**
* Responds to any HTTP request that can provide a "message" field in the body.
*
* @param {!Object} req Cloud Function request context.
* @param {!Object} res Cloud Function response context.
*/
exports.helloWorld = function helloWorld(req, res) {
// Example input: {"message": "Hello!"}
if (req.body.message === undefined) {
// This is an error case, as "message" is required.
res.status(200).send('No message defined!');
} else {
// Everything is okay.
console.log(req.body.message);
res.status(200).send(req.body.message);
}
};
还有一个简单的 HTML 和下面的 Javascript:
$.ajax({
url: "https://us-central1-bustling-opus-830.cloudfunctions.net/Authenticate",
type: "POST",
data: {
message: 'Testing'
},
dataType: 'json',
success: function (response) {
console.log(response);
},
error: function (xhr, status) {
console.log(xhr);
}
});
导致错误的原因。
在我的 DEV 控制台中,我可以看到网络请求通过。这是我得到的 HTTP 响应 Headers:
cache-control:private
content-encoding:gzip
content-length:27
content-type:text/html; charset=utf-8
date:Wed, 08 Feb 2017 03:45:50 GMT
etag:W/"7-274e639a"
function-execution-id:azc1zqfb1tq8
server:Google Frontend
status:200
vary:Accept-Encoding
x-cloud-trace-context:70e08d634a9644c32530326de0471a64;o=1
x-cloud-trace-context:70e08d634a9644c32530326de0471a64
x-powered-by:Express
我本来希望在响应 Headers 中看到 Access-Control-Allow-Origin header 以表明它允许 * 但我绝对没有看到它。
但疯狂的是,当我查看“网络”项并单击“响应”时,我得到:
Testing
这表明所有事情都是平等的,实际上 运行!
如果之前有人回答过这个问题,我深表歉意,但我已经搜索了很多不同的关键字,但似乎都没有解决我的问题。我认为对这个问题有新的看法(以及一些不错的专业知识)会有所帮助。
提前致谢!
您的前台 (HTTP) Google Cloud Function 需要在对 AJAX 客户端请求的响应中设置适当的 CORS headers。 HTTP Functions 的请求和响应参数与相应的 ExpressJS objects 具有等效的属性,可用于设置 CORS headers 并根据需要响应预检请求。
例如:
exports.Authenticate = function Authenticate (req, res) {
//set JSON content type and CORS headers for the response
res.header('Content-Type','application/json');
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'Content-Type');
//respond to CORS preflight requests
if (req.method == 'OPTIONS') {
res.status(204).send('');
}
//continue function ...
};
应该修改上面的 headers 和逻辑以反映您服务的特定需求,但希望能帮助您入门。
如果您仍然对答案感兴趣,我实际上写了一篇关于如何使用 Express 中间件处理该问题的博客 post:https://mhaligowski.github.io/blog/2017/03/10/cors-in-cloud-functions.html。
您也可以使用 cors
包来解决这个问题,正如 Google 所推荐的那样。事实上,他们也在自己的示例代码中使用了这个。检查此 example。
这是代码 -
const cors = require('cors')({
origin: true,
});
//Your code here
//Use the following function instead of just res.send. return keyword is not compulsory here
return cors(req, res, () => {
res.send();
});