サーバレスのサムネイル

サーバレス

Google App Engine(GAE)で「Access-Control-Allow-Origin」などのCORS設定を追加する

公開日: 2019.8.9

Google App Engineで、APIなどを公開する際に、サプリ側からアクセス許可をするCORSの設定をしていきます。

編集ノート:SERVERSUSでは、パートナーリンクからコミッションを得ています。コミッションが記事の意見や、サービスの評価に影響を与えることはありません。

CORSってなに?

「Cross-Origin Resource Sharing(オリジン間リソース共有)」の略です。

ブラウザは、Ajax通信をする際のルール「同一生成元ポリシー」によって、違うドメインへのAjax通信ができないようになっています。

例えば、

  • フロントアプリ:example.com (Vue.js, Reactなど)
  • バックエンドアプリ:api.example.com (Node.js, Railsなど)

といった形で、フロントとバックエンドAPIを別ドメインにするケースや、別サービスのAPIからデータを取得する際に、ドメインが異なるとAjax通信ができなくなります。

しかし、CORS設定をすることで、オリジン間のHTTPリクエストが実行できるようになります。

今回は、このCORS設定をGoogle App Engineで追加する方法を見ていきます。

動的ページの場合は、アプリに書く

GAEでは、RubyやNode.jsのアプリを公開できますが、そうした動的なページの場合は、アプリ側でヘッダーに「Access-Control-Allow-Origin」情報を追加しておけば、そのままGAEでも出力されます。

Node.js(Express)の例

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

PHPの例

header("Access-Control-Allow-Origin: *");

Goの例

w.Header().Set("Access-Control-Allow-Origin", origin)

静的ファイルの場合はapp.yamlに記載

静的ファイルの場合は、ヘッダー情報を動的に記載することができないので、GAEのアプリ情報を管理する「app.yaml」にヘッダー情報を記載します。

handlers:
- url: /images
  static_dir: static/images
  http_headers:
    Access-Control-Allow-Origin: http://mygame.appspot.com

全てのオリジンからのアクセスを許可する場合は、

Access-Control-Allow-Origin: '*'

となります。シングルクォーテーションで囲うのを忘れないようにしてください。

設定がかけたらデプロイすればOKです。

gcloud app deploy

Google App Engineで、CORS設定を追加する方法を見てきました。アプリはアプリ内で、静的ファイルは「app.yaml」で覚えておけば簡単ですね。

参考

オリジン間リソース共有 (CORS) | MDN

CORS サポート | GCP


価格は記載がある場合を除き、すべて税込みです。

関連キーワード

サーバレスの新着記事