AngularJSで外部APIをたたく際に発生するクロスドメイン問題を攻略できたのでメモ

AngularJSで開発をしていて外部API(Yahooさんのテキスト解析)を叩くことがありまして、クロスドメイン問題にハマったのでメモ。

いやー勉強することは無限ですな。。
結論から言うと、これでえええの、、!?って感じで解決したので、詳しい方いらっしゃったらください。

クロスドメイン問題

クロスドメイン問題とは、まあググればアホみたいに出てくるのでそちらを見ていただければいいんですが、、。
簡単に言うと、Ajaxでブラウザから別サーバーにアクセスするのは基本的にはできへんで!っていうものだそう。セキュリティ上の問題だそう。

今回の場合だと、ローカル→YahooさんのサーバーはNGということ。
んまあどっかのサーバーにあげてたとしても、Yahooさんのサーバー出ない限りNG。

くぐり抜ける方法がいくつかあるらしいです。
参考:
http://tigawa.github.io/blog/2013/10/09/webapi/
http://d.hatena.ne.jp/satosystems/20140108/1389173683

クロスドメイン問題の攻略法

'Access-Control-Allow-Origin' ヘッダを付与※外部APIたたくときこれは基本無理

上の参考記事に書いてることそのままですが、API を提供するサーバ側を修正しなければならないため、今回ののような他社のサービスを利用する場合はNG。

JSONPでアクセスする

var url = "https://example.com";
$http.json(url).success(function(data){
	console.log(data);
 });

基本的にこれで全部解決みたいですね。
ドットインストールでAngularJSからYoutubeのAPIたたくときもこれでやってました。

ただ問題がひとつ。
_JSONでデータを返してくれないAPIには対応してない、、!_んですね。
今回使おうとしていたAPIがYahooのテキスト解析APIxmlにしか対応しておらず、、、。
なのでこれでは攻略できないという結論に至りました。

jQueryプラグインを使う

ここにも書いていますが、jQueryプラグインを読み込ませるだけで解決するそう。
ただ、書いてあるとおりやっても何故か解決できなかったので断念。
部分的にjQueryで書いたら行けた。みたいな記事もあったので試しましたがこれもダメで、、、。

このプラグインの中身、実はYahooAPIをたたいて一旦Yahooにアクセスさせて、JSONPで情報を取り出しているそう。
ってことで、結局JSONPに対応していない外部APIをたたくのは無理。。なるほど。

CORSをつかう

JSONPが使えない場合でも、CORSという仕組みを使えば攻略できるそう。
ただ、これも対応しているしていないの問題があるそうで、
そこには注意が必要です。

いろいろやり方があるそうですが、ここに書いてありますが、単純にたたくAPIのURLにcrosproxyのURLをかまして、プロキシサーバーを経由するようにするだけで可能なんだとか。簡単すぎw

var url = "https://example.com";
$http.json(url).success(function(data){
	console.log(data);
 });

こう書いていたところを、

var url = "https://www.corsproxy.com/example.com";
$http.json(url).success(function(data){
	console.log(data);
 });

これでOKだそう。
なんかセキュリティ的にどうなん?とか、ここのサーバー落ちたら終わりやん?とかいろいろ思いますが、一旦これでOKとしました。

まとめ

JSONPもしくはCORSに対応していないと基本的に無理
JSONPに対応してるときは、上の「JSONPをつかう」で解決。
JSONPに対応していないときはCORSをつかうことになる。上の「CORSをつかう」で解決。
・どっちにも対応していない場合は、Ajaxで外部APIはたたけません!サーバー側でたたくようにする!(たぶん)