web-dev-qa-db-ja.com

Access-Control-Allow-OriginがGoogle Cloud Functions GCFを機能しない

ここでは初心者のようですが、GCFにアクセスするためにブラウザから単純なAJAXリクエストを実行しようとしていますが、Chromeがレポートしています：

XMLHttpRequestが読み込めません https://us-central1-bustling-opus-830.cloudfunctions.net/Authenticate 。要求されたリソースに「Access-Control-Allow-Origin」ヘッダーがありません。したがって、オリジン ' https://beast.reachboarding.com.a 'はアクセスを許可されません。

（上記のように）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);
    }
};

そして、次のJavascriptを使用した単純なHTML：

$.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応答ヘッダーがあります：

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ヘッダーが表示されることを期待していましたが*確実に表示されません。

クレイジーなのは、ネットワーク項目を見て、Responseをクリックすると、次のようになることです。

Testing

これは、すべてが等しいことを示唆し、実際に実行されました！

以前に回答があった場合はお詫び申し上げますが、同じくらい多くの異なるキーワードを検索しましたが、何も問題を解決していないようです。私はこの問題に目を新しい目で見れば（そしてある程度の専門知識があれば）役立つと思いました。

前もって感謝します！

javascriptnode.jsajaxcorsgoogle-cloud-functions
11
Encoder

フォアグラウンド（HTTP）のGoogle Cloud Functionは、AJAXクライアントリクエストへの応答で適切なCORSヘッダーを設定する必要があります。 HTTP Functions のリクエストおよび応答パラメーターには、 CORSヘッダーを設定し、必要に応じてプリフライトリクエストに応答するために使用できる、対応するExpressJSオブジェクトのプロパティ。

例えば：

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

};

上記のヘッダーとロジックは、サービスの特定のニーズを反映するように変更する必要がありますが、うまくいけば始めるのに役立ちます。

22
ryanmac

Googleの推奨に従い、corsパッケージを使用してこれを修正することもできます。実際、彼らはまた、独自のサンプルコードでこれを使用しています。これをチェックしてください 例 。これはコードです-

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

それでも回答に興味がある場合は、Expressミドルウェアでそれを処理する方法についてブログ投稿を実際に書いた： https://mhaligowski.github.io/blog/2017/03/10/cors-in- cloud-functions.html 。

2
mhaligowski