Cloudflare をプロキシとして使用する Heroku にデプロイされたサイトがあります。
一部のフロントエンドの動作については、Vue-resource で Vue を使用していくつかの ajax リクエストを実行しています。Content-Type:application/json応答は、ヘッダー付きの JSON 形式です。
奇妙なことに、これは予想される動作であるにもかかわらず、応答が vue-resource によって JavaScript 配列/オブジェクトに解析されていないため、スクリプトでエラーが発生します。ただし、この問題は Cloudflare URL 経由でサイトにアクセスした場合にのみ発生します。Heroku の URL (例: foo-bar-1234.herokuapp.com) からアクセスすると、すべて正常に動作します。また、私のローカル開発環境 (Vagrant、Nginx) でも問題なく動作しています。
この問題は Chrome でのみ発生します。Cloudflare かどうかに関係なく、Safari と Firefox で問題なく動作します。
問題は、Heroku サーバーからの応答に対して CloudFlare が行っていることで、Chrome の Vue リソースが応答を適切に解析するのを妨げていることにあると思います。
参考までに、CloudFlare が提供するリクエストからのレスポンスを次に示します。
cache-control:no-cache
cf-ray:2d2f1980573d3476-LHR
content-encoding:gzip
content-type:application/json
date:Mon, 15 Aug 2016 19:37:10 GMT
server:cloudflare-nginx
set-cookie:sam_session=[redacted]; expires=Mon, 15-Aug-2016 21:37:10 GMT; Max-Age=7200; path=/; HttpOnly
status:200
via:1.1 vegur
x-ratelimit-limit:60
x-ratelimit-remaining:59
対heroku提供のもの：
Cache-Control:no-cache
Connection:keep-alive
Content-Type:application/json
Date:Mon, 15 Aug 2016 19:40:10 GMT
Server:Apache
Set-Cookie:sam_session=[redacted]; expires=Mon, 15-Aug-2016 21:40:10 GMT; Max-Age=7200; path=/; HttpOnly
Transfer-Encoding:chunked
Via:1.1 vegur
X-Ratelimit-Limit:60
X-Ratelimit-Remaining:58
ヘッダーはかなり似ているように見えるので、これを引き起こす方法で応答がどのように異なるかはわかりません...
デバッグの提案をいただければ幸いです。
更新: コンパイルされた JavaScript はここで確認できます (大きなファイル): https://github.com/samarkanddesign/samarkand-web/blob/master/public/js/admin.js
これは大きなファイルなので、リポジトリを確認することをお勧めします: https://github.com/samarkanddesign/samarkand-web/tree/master/resources/assets/js
更新 2 : 両方の状況で実行される vue-resource ajax リクエストの例:
クラウドフレア
Heroku から直接:
Heroku の例では、応答dataがオブジェクトの配列として解決されているのに対し、CloudFlare では文字列であることがわかります。