Access-Control-Allow-Origin无法正常使用Google Cloud Functions GCF [英] Access-Control-Allow-Origin not working Google Cloud Functions GCF

问题描述

我在这里感觉像是一个新手，但是我试图通过浏览器运行一个简单的AJAX请求以访问GCF，Chrome正在报告:

I feel like a newbie here but I'm trying to run a simple AJAX request from a browser to access a GCF and Chrome is reporting:

XMLHttpRequest无法加载 https://us-central1-bustling-opus-830.cloudfunctions.net/Authenticate.请求中不存在"Access-Control-Allow-Origin"标头资源.因此，来源' https://beast.reachboarding.com.au '不是允许访问.

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的函数(如上所示)，该函数使用的存储桶名为:

I've got a function called Authenticate (as shown above) that's using a bucket called:

bustling-opus-830.appspot.com

我已使用gsutil使用以下JSON文件设置CORS:

I've used gsutil to set CORS using the following JSON file:

[{
    "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命令获得以下输出:

And then get the following output from the corresponding get command:

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"]}]

我使用的是以下创建新函数时提供的默认示例代码:

I'm using the default example code that's provided when you create a new function as stated below:

/**
 * 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);
    }
};

以及带有以下Javascript的简单HTML:

And a simple HTML with the following 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);
    }
});

是哪个原因引起的错误.

Which is causing the error.

在我的DEV控制台中，我可以看到网络请求通过了.这是我得到的HTTP响应标头:

In my DEV console I can see the network request go through. Here are the HTTP Response Headers I'm getting are:

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

我希望在Response Headers中看到Access-Control-Allow-Origin标头，以表明它允许*，但我绝对看不到.

I would have expected to see the Access-Control-Allow-Origin header within the Response Headers to indicate that it was allowing * but I'm definitely not seeing it.

但疯狂的是，当我查看网络"项并单击响应"时，我得到:

The crazy thing though is that when I look at the Network item and click on Response I get:

Testing

这暗示着所有事物都是平等的，它实际上已经运行了！

Which suggests that all things being equal, it ACTUALLY ran!

很抱歉，如果以前已经回答过这个问题，但是我搜索了许多不同的关键字，似乎没有任何事情可以解决我的问题.我认为对此问题重新审视(以及一些体面的专业知识)会有所帮助.

I apologise if this has been answered before but I've searched for as many different keywords and nothing seems to have solved my problem. I thought a fresh pair of eyes on the issue (and some decent expertise) would help.

提前谢谢！

推荐答案

您的前台(HTTP)Google Cloud Function需要在对AJAX客户端请求的响应中设置适当的CORS标头. HTTP函数的请求和响应参数与相应的ExpressJS对象具有相同的属性.可用于设置CORS标头并根据需要响应预检请求.

Your foreground (HTTP) Google Cloud Function needs to set the appropriate CORS headers in the responses to the AJAX client requests. The request and response parameters of HTTP Functions have equivalent properties to the corresponding ExpressJS objects which can be used to set the CORS headers and respond to preflight requests as needed.

例如:

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 ...

};

应该修改上面的标题和逻辑以反映服务的特殊需求，但希望可以帮助您入门.

The headers and logic above should be modified to reflect the particular needs of your service but should hopefully help you get started.

这篇关于Access-Control-Allow-Origin无法正常使用Google Cloud Functions GCF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！