自作apiをJSで叩くとNo 'Access-Control-Allow-Origin' header is present on the requested resource.がでる。

Question

クライアント側（JS）で自作apiを叩いています。
apiを叩くと、
XMLHttpRequest cannot load http://api-example.com/timelines/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

というようなエラーが出ており困っています。

apiはPHPで作られており
。
http://crunchtimer.jp/blog/technology/jquery/330/
を参考に以下のheaderを記述しました。
header("Access-Control-Allow-Origin: *");
が同じエラーがでます。

api-example.com（仮名）は別サーバにあり、
他のapiを叩いているプログラムがローカルだからでしょうか？

何か原因分かる方いましたらご教授お願いします。

Answer 1

やっぱりローカルだからですかねー。

個人的にはビルトインサーバは表示確認＋αくらいにしかつかってないので、
APIとか対抗先を叩くときは、別途テスト用のリモートサーバにおいてテストしてます。

APIがあるサーバのhostsファイルの設定にもよりますが、
当然、apiと同じサーバでもテストは出来ると思います。

あとApacheのヘッダですが、本家を見るか、
MDNのサイトとか読まれると参考になると思いますよ。
http://goo.gl/UMGqT9

直接的な解答じゃなくてすいませんが。

Answer 2

おっしゃるとおり、別サーバ（別ドメイン）にAPIサーバがあるためです。

それに付随してですが、ローカルのファイルを直接ブラウザでプレビューした状態から外部ドメインのリクエストは呼び出せません（ブラウザの仕様によるもの）

なので、ローカルでテストする際は面倒ですが、ローカルにもHTTPサーバを立てて、サーバ経由でファイルを閲覧する必要があります。

Macなら、pythonのビルトインサーバを使ったり、PHPのビルトインサーバを使うと簡単にサーバを立ち上げて確認出来ると思います。

pythonの例

% python -m SimpleHTTPServer 8000

Comments

[K_T_T_K]

ローカルホストで動作していたJSのファイルをapiが動作しているサーバに配置し動作確認したところエラーなく動作しました。
しかし、ビルドインサーバを使ってみましたが、エラーは消えることがありませんでした。
PCはMacです。

[matsubokkuri]

変ですね。

サーバ側の設定が間違っている可能性もあるので、別サービスのapiを呼び出せるがテストしてみてはいかがでしょうか？

[matsubokkuri]

http://jsdo.it/Yuki.Matsukura/bank_code_api/download
こちらをダウンロードして、普通にファイルを直接開いて実行しました。
HTTPサーバ通さなくても、実行出来るみたいですね。