AndroidのchromeではConsole.logなどの出力は見れない。Android studio付属のエミュレータを使ってデスクトップのchromeから見ることができる。
chrome://inspect/#devices を開いて暫く待つと以下のように接続されるので、URLを確認して inspect をクリックする。
DevToolsが開く。スクリプトのデバッグなどもできる。
OverlayTestModeを無効にするととりあえず直った。
レジストリキー HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\Dwm\OverlayTestMode の値を5にする(dword)。
vmwareのゲストでGPU（ハードウェアアクセラレーション）を有効にしていると、chromeでポップアップウインドウがうまく表示できない。（以下の図のユーザー名サジェストが白くなっている部分）
chromeはデフォルトでGPUを使って描画しているので、これを無効にすればちゃんと表示できる。
コマンドラインで”--disable-gpu“をつけると、GPUを無効にできる。
chromeでオムニバー（アドレスバー）に”chrome:gpu“と入力すると以下のように確認できる。以下は有効のとき
以下は無効の時
CORSはクロスサイト間のリソース管理。Javascriptから他のサイトのリソース取得を管理するためのプロトコル。
通常こういったクロスオリジンのアクセスは許されないが（ブラウザが許さない）サーバがあるhttpヘッダを返すことで許すことができる。
このヘッダを付けることで、クライアントはその値と自分のJSのサイトが一致していたら通信を許可する。.htaccessに以下のように記述すると、すべてのクロスオリジンアクセスを許す。
|
1 2 3 |
<IfModule mod_headers.c> Header add Access-Control-Allow-Origin "*" </IfModule> |
通常は完全にアクセスを許すことはしたくないはずなので自分のサイトだけを登録するが、サイトが複数ある場合はデバッグ中のlocalhostを加えたい場合は面倒なことになる。
更にサイトがディレクトリを掘っていて、ディレクトリごとに.htaccessがある場合とかだっともっと複雑になる。
とりあえず動いているものとして、以下の.htaccess。
|
1 2 3 4 5 6 |
<IfModule mod_headers.c> SetEnvIf Origin "^https?://(localhost:8080|tango\.dip\.jp)" AccessControlAllowOrigin=$0 Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE" Header set Access-Control-Allow-Headers "Content-Type, Authorization" </IfModule> |
これはlocalhostとtango.dip.jpを許可する。返されるヘッダにはアクセス元のサイトのみが返るのだと思われる。
仕様によると以下の記述でもいいらしい。（試していない）
|
1 2 3 4 5 |
<IfModule mod_headers.c> Header set Access-Control-Allow-Origin "http://localhost:8080;http://tango.dip.jp" Header set Access-Control-Allow-Methods "GET,PUT,POST,DELETE" Header set Access-Control-Allow-Headers "Content-Type, Authorization" </IfModule> |
上記の.htaccessにはメソッドの記述もあるが、これは許すメソッドを定義しているものと思われる。そのためにブラウザはOPTIONメソッドでリクエストしてこの情報を得るものと思われる。このときのURLはサイトのURLと同じと思われるので、PHPなどが動くときは２００が返るようにしておかないと、Chromeなどはエラーを出す。OPTIONのときはPHPの$_POSTがないと思われるので、このとき５００とかを返すとCORSがうまくいかない。
ChromeなどのエラーResponse to preflight request doesn’t pass access control checkはこのOPTIONを指しているものと思われる。
このように非常に面倒で、ヘッダとかを調べるのも面倒なので適当に書いた。ヘッダを確認するにはChromeのDEVTOOLSを使うといい。３０４になってしまう場合は、シフトキーを押しながらリロードするか、リロードボタンで右クリックして、ハードリロードなどを選ぶ。タイプコラムがxhrになっているのがスクリプトからのアクセス。
