Chromeのjsonからクラウドフレアを介して配信されているリソースにアクセスするためのAjax応答データ

Question

Cloudflareをプロキシとして使用するヘロクにデプロイされたサイトがあります。

いくつかのAjaxリクエストを実行するためにVueリソースを使用してVueを使用しています。応答は、Content-Type:application/jsonヘッダーを持つJSON形式です。

私のスクリプトがエラーになるのは、期待された動作であるにもかかわらず、応答がvue-resourceによってjavascriptの配列/オブジェクトに解析されていないためです。ただし、この問題は、サイトがCloudflare URL経由でアクセスされている場合にのみ発生します。 Heroku URL（foo-bar-1234.herokuapp.comなど）からアクセスすると、すべて正常に動作します。また、私のローカル開発環境（Vagrant、Nginx）でもうまく動作しています。

この問題はChromeでも発生します。それはCloudflareかどうかに関係なく、SafariとFirefoxでうまく動作します。

私は、CloudFlareが、正しくレスポンスを解析することで、ChromeのVueリソースを停止しているHerokuサーバーからの応答に何かをしていると考えています。ここでは参考のため

CloudFlareの-務めたリクエストに対するレスポンスです：Herokuの-務めた1対

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 

：ヘッダはかなり似ているようだ

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-リソースAJAXリクエスト：

1. CloudFlareの Herokuのからの直接

2. ：

我々は、それが文字列だCloudFlareのいずれかにしながら応答dataは、オブジェクトの配列として解決されることをHerokuの例で見ることができます。

Answer 1

私はこの問題がVue-Resourceにあり、CloudFlare（SPDYプロトコル）は小文字のレスポンスヘッダーを使用し、Heroku Apacheは大文字を使用していると考えています。

Vueリソースは、インターセプタ内の小文字のヘッダーを間違って無視しているため、応答本文の解析が行えません。これは、このバグの問題で参照されている

：https://github.com/vuejs/vue-resource/issues/317

そして、それにパッチを適用する簡単な方法は、カスタムインターセプタを経由する：

Vue.http.interceptors.unshift(function(request, next) { 
    next(function(response) { 
     if(typeof response.headers['content-type'] != 'undefined') { 
      response.headers['Content-Type'] = response.headers['content-type']; 
     } 
    }); 
});