2017-02-09 14 views
4

Я чувствую себя новичком здесь, но я пытаюсь запустить простой запрос AJAX из браузера, чтобы получить доступ к GCF и Chrome сообщает:Access-Control-Allow-Origin не работает Google Облако функции ГКМ

XMLHttpRequest не может загрузить https://us-central1-bustling-opus-830.cloudfunctions.net/Authenticate. Нет заголовка «Access-Control-Allow-Origin» на запрашиваемом ресурсе . Origin 'https://beast.reachboarding.com.au' поэтому не разрешенный доступ.

У меня есть функция под названием Authenticate (как показано выше), что это, используя ведро под названием:

bustling-opus-830.appspot.com 

Я использовал GSUtil установить CORS, используя следующий формат JSON файла:

[{ 
    "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/ 

А затем получить следующий вывод из соответствующей команды ПОЛУЧАЕТ:

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

я бы ожидал увидеть Access-Control-Allow-Origin заголовок внутри заголовков ответа, чтобы указать, что оно позволяет * но я определенно не видя этого.

Сумасшедшая вещь, хотя в том, что, когда я смотрю на пункт Сеть и нажмите на ответ я получаю:

Testing 

Что говорит о том, что при прочих равных условиях, он РЕАЛЬНО побежал!

Приносим извинения, если это было ранее, но я искал столько разных ключевых слов, и ничто, кажется, не решило мою проблему. Я думал, что свежая пара взглядов на этот вопрос (и некоторый достойный опыт) поможет.

Заранее благодарен!

+0

Правильная команда gsutil 'gsutil cors set cors.json gs: // bustling-opus-830', или вы уже уверены, что' gsutil cors установить cors.json gs: //bustling-opus-830.appspot. com/'должен добиться того же самого? Я прошу, потому что документы на https://cloud.google.com/storage/docs/cross-origin#Configuring-CORS-on-a-Bucket просто используют неквалифицированную форму 'gsutil cors set cors-json-file.json gs : // example' – sideshowbarker

+0

Я считаю, что две команды синтаксически одинаковы. Единственное различие, которое я вижу, - это имя файла JSON. Я использовал cors.json, где в качестве примера был cors-json-file.json. Это то, что вы имели ввиду? – Encoder

+0

Нет, я просто имел в виду 'gs: // bustling-opus-830.appspot.com /' vs 'gs: // bustling-opus-830' – sideshowbarker

ответ

9

На переднем плане (HTTP) облачная функция Google должна устанавливать соответствующие заголовки CORS в ответах на запросы клиента AJAX. Параметры запроса и ответа HTTP Functions имеют эквивалентные свойства соответствующим объектам ExpressJS, которые могут использоваться для установки заголовков CORS и при необходимости отвечать на предполетные запросы.

Например:

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

}; 

заголовки и логика выше, должны быть изменены, чтобы отражать конкретные потребности вашей службы, но, будем надеяться, поможет вам начать работу.

+1

Ryan you dead set legend! Я не могу поверить, что это было так просто. Я добавил заголовки и нажал обновление, и он моментально выполнялся, как ожидалось. Спасибо большое! – Encoder

+0

Ты мой спаситель. Я весь день пытался понять это, и это было единственное, что его исправило. –