Access-Control-Allow-Origin not working Google GCF Cloud Features

Question

I feel new to here, but I am trying to run a simple AJAX request from a browser to access GCF, and Chrome reports:

XMLHttpRequest cannot load https://us-central1-bustling-opus-830.cloudfunctions.net/Authenticate . There is no "Access-Control-Allow-Origin" header in the requested resource. Origin ' https://beast.reachboarding.com.au ', therefore, not allowed access.

I have an Authenticate function (as shown above) that uses a bucket named:

bustling-opus-830.appspot.com 

I used gsutil to install CORS using the following JSON file:

 [{ "origin": ["https://beast.localdev.com.au","*"], "responseHeader": ["Content-Type"], "method": ["GET", "HEAD", "DELETE", "OPTIONS"], "maxAgeSeconds": 3600 }] 

With the following command:

 gsutil cors set cors.json gs://bustling-opus-830.appspot.com/ 

And then get the following result 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 use the default sample code that is provided when creating a new function, as follows:

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

And plain 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); } }); 

What causes the error.

In my DEV console, I can see that the network request is passing. Here are the headers of the HTTP responses I receive:

 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 

I would expect to see the Access-Control-Allow-Origin header in the response headers to indicate that it allows *, but I definitely don't see it.

The crazy thing, however, is that when I look at the "Network" element and click on "Answer", I get:

 Testing 

Which means that all things are equal, he STRONGLY ran!

I apologize if the answer was given earlier, but I was looking for so many different keywords, and nothing seems to have solved my problem. I thought a fresh couple of views on this issue (and some decent experience) would help.

Thanks in advance!

Answer 1

In the foreground (HTTP), the Google Cloud feature should set the appropriate CORS headers in response to AJAX client requests. The request and response parameters of the HTTP function have equivalent properties to the corresponding ExpressJS objects, which can be used to set CORS headers and respond to pre-flight requests as needed.

For instance:

 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 changed to reflect the specific needs of your service, but hopefully it helps you get started.

Answer 2

If you are still interested in the answer, I actually wrote a blog post on how to handle Express middleware: https://mhaligowski.imtqy.com/blog/2017/03/10/cors-in-cloud -functions.html .

Answer 3

You can also use the cors package to fix this, as recommended by Google. In fact, they also use this in their own model codes. Check out this example . This is the code -

 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(); });