読者です 読者をやめる 読者になる 読者になる

牌語備忘録 -pygo

あくまでもメモです。なるべくオフィシャルの情報を参照してください。

牌語備忘録 -pygo

AngularJS の サンプルコードをローカルで弄ってたら Google Chrome だと表示されなかったりする件

Javascript AngularJS

症状

サンプルコードを写経してたら表示されたりされなかったりする。
でも Firefox だと表示される。
Google Chrome の問題なのか Javascript の問題なのか?

調べてみる

問題のファイルを Chrome で開いて、Google Chrome Developer Tools の Soureces で確認するとエラー出てた。

XMLHttpRequest cannot load file://localhost/Users/username/hoge/hoge.html. Origin null is not allowed by Access-Control-Allow-Origin.

原因

要は、ドメインが違うサイトのデータを勝手に取れなくなってしまったのです。Same Origin Policyというらしいです。

AjaxでAccess-Control-Allow-Originのエラーを回避する方法 | 村田佑介.com

デフォルトではローカルのファイルの読み込みができないらしい。

回避方法

MacOSX の場合

起動オプションを指定して Chrome を立ち上げればよいらしい。
Google先生に訊いたら結構これにハマった人は多いみたい。
chrome://flags/ でこれ設定できるようになったらよいのにね。

その1: terminal から オプションつけて起動
open -a Google\ Chrome --args -allow-file-access-from-files
その2:Automator.app でアプリ化して起動

下記リンク参照

やり方

  1. Automator.app を起動して『Application』 選択
  2. 左のアクションのペインで『シェルスクリプトを実行』を選択
  3. 『open -a Google\ Chrome --args -allow-file-access-from-files』と入力して保存

ちなみにランチャーに Quicksilver を使ってる場合は、作成したアプリを開けなかったりするので『パッケージの内容を表示』で中の『Application Stub』をchmod 775 などとすると開く。
このファイル

  • /Contents/MacOS/Application Stub

確認方法

Googe Chrome のアドレスバーに

chrome://version/