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

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