JavaScriptからversionにアクセス
早速JavaScriptからversionにアクセスしてみます。スクリプトは以下の様な感じにしました。
<script>
var url = "https://identity.tyo1.conoha.io/v2.0";
var type = "GET";
var access = function() {
$.ajax({
url: url,
type: type,
success: function(data) {
$('#output').text(JSON.stringify(data));
},
error: function() {
console.log('$.ajax error');
}
});
}
$(function(){
access();
});
</script>
$.ajaxにURLとアクセスコマンドを入れて、成功時と失敗時のコールバック関数を登録しています。成功時にはHTML内のid='output'というdivタグに受け取ったデータを書き込みます。
Chromeを開いて、バージョンよ来い!と願うも以下のエラーが発生。
XMLHttpRequest cannot load https://identity.tyo1.conoha.io/v2.0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
これはAPIのドメインとアクセスしようとしているHTMLのドメインが異なることから発生するエラーです。Chromeがセキュリティーのためにそういうアクセスを禁止している訳ですね。
JSONPでアクセス
この場合、JSONPでアクセスするとだいたい大丈夫です。早速JSONPにしてみましょう。
var url = "https://identity.tyo1.conoha.io/v2.0?callback=?";
var type = "GET";
var access = function() {
$.ajax({
url: url,
type: type,
dataType: 'jsonp',
success: function(data) {
$('#output').text(JSON.stringify(data));
},
error: function() {
console.log('$.ajax error');
}
});
}
Uncaught SyntaxError: Unexpected token :
うーん、サーバ側がJSONPに対応していないようです。。。
回避策
最終的にはPhoneGapからAPIを呼びますが、その際'Access-Control-Allow-Origin' エラーは発生しません。なので、当面Chrome上で問題回避できればそれで良いわけです。
幸い、以下のパラメータを付けてChromeを起動すると今回のエラーが発生しなくなります(セキュリティーが下がってしまいますが)。
--disable-web-security
Macではターミナルから以下のように起動します。
open -a Google\ Chrome --args --disable-web-security
これでJSONのコードでアクセスすると…
{"version":{"status":"stable","updated":"2015-05-12T09:00:00Z","media-types":[{"base":"application/json"},{"base":"application/xml"}],"id":"v2.0","links":[{"href":"https://identity.tyo1.conoha.io/v2.0/","rel":"self"},{"href":"https://www.conoha.jp/docs/","type":"text/html","rel":"describedby"}]}}
キタっ
これで安心してJavaScriptからAPIを使用できます。次はトークンの発行とVM情報の取得を行います。
今回のコードはGitHubにおいてあります。