Azure WebApps でCORSの設定をする

2016/09/23 文章があまりにひどかったので全面的に修正しました。

こんにちは。まーやです。CORS設定について調べました。

現在ざっくり書くとこんな感じのシステムを作成中。Azure Webapps 2台使って構築中。

e0b70034-f511-8b09-a4e4-e9db43859b0e

Node使ってるんだから会話履歴もNodeからとればいいのでは・・・となりそうですが、その辺は共通基盤APIがあると想定して別のサーバへAPIを使って取りに行くということにしましょう。

私がCORSエラーに出会うまで

中のチャットルームシステムもできた。実際に各サーバにデプロイして結合テストするぞ!と意気込んでいざ実行してみたところ、過去情報取得APIをたたいたところ、情報が取れない。。。何だろうと思ってログを確認してみると次のようなエラーログが。

XMLHttpRequest cannot load https://xxx.jp/1111.json.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.

ふむ。。。なんとも見覚えのあるエラー。。。「CORS設定されていないときのエラー」です。

CORSのおさらい

CORSとは「Cross-Origin Resource Sharing」の略でオリジン(そのシステムが動いているドメイン)以外のドメインからデータをとるときの仕組みを指します。アクセスコントロールの一つです。CORSを設定してあげることで、クロスオリジン(そのシステムが動いているドメイン以外のドメイン)のバックエンドからの呼び出しが可能になります。

今回出ているエラーは「データ取りに行ったけど、そのサーバは他のドメインからの接続を許可していなかったよ」というエラーがでているのです。

ではどうなっていれば接続許可され、データが取れるのでしょうか。
HTTPレスポンスヘッダに「Access-Control-Allow-Origin: https://xxx.jp」とでていれば接続が許可されている、ということになります。

いざCORSの設定へ

これを修正するためには、Javascript側でもにゅもにゅする対応策もあるようですが、今回はデータ取得先であるAPIサーバも自分で作っているものなので、やっぱりサーバ側で対処するのが美しい。しかしながらWebAppsはPaaSシステムですから、基本的にはサーバにCLI接続してごりごり設定を書き換える・・・なんてことはできません。CORSの設定もWebAppsデフォルトでは何も設定されていない状態です。
「WebAppsの場合はどうやってCORSの修正するのかしらん?」
「HTTPレスポンスヘッダに「Access-Control-Allow-Origin: https://xxx.jp」どうやっていれるのかしらん?」
と調べてみたところ、しれっとダッシュボードの中にあることがあっさり判明しました。

WebApps CORS設定手順

1. 対象のWebApps(今回はJavaがのっている方のWebApps)を選択し、メニュー下の方にある「CORS」をクリックします。
2. 許可するドメインを設定する欄が出現しますので、対象となるドメインの設定を行います。この設定ではワイルドカードの利用も可能です。「世界中どこからでも接続OK!」というのであれば、*と設定してあげればよいです(あまり良いとは言えない設定ではありますが)。
3.保存ボタンを押して設定完了。
FireShot Capture 165 - cloudj-java-webapp - Microsoft Azure_ - https___portal.azure.com_#resource
FireShot Capture 166 - CORS - Microsoft Azure_ - https___portal.azure.com_#resource

保存ボタンを押下した後はすぐに反映作業に入ってくれます。ダッシュボード上右上の方に完了通知が来たら利用できます。

Azureってダッシュボードでできることが多くて最初はてんやわんやするんですが、慣れるといろいろできるのが逆にいいかんじで私は好きです。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中