使用vue-resource获取一段json数据，为什么返回的是一个Blob对象？

Question

代码如下：

var app = new Vue({

    el: '#app',
    data: {
      data: ""
    },
    created: function () {
      this.$http.get('./test.json').then(res => {
        console.log('请求成功')
        this.data = res.body
        console.log(this.data)
      }, res => {
        console.log('请求失败')
      })
    }
  })

浏览器打印出的是一个Blob对象：

求解

Answer 1

设置Content-Type和Accept为application/json试试

Answer 2

今天也遇到了这个问题，找了半天解决不了。后来改用fetch 可以正常返回，后来请教大神，大神对比了fetch 和 vue resources 源码后，给出下列方案

                function readBlobAsText(blob) {
                    var reader = new FileReader()
                    var promise = fileReaderReady(reader)
                    reader.readAsText(blob)
                    return promise
                }

                function fileReaderReady(reader) {
                    return new Promise(function(resolve, reject) {
                      reader.onload = function() {
                        resolve(reader.result)
                      }
                      reader.onerror = function() {
                        reject(reader.error)
                      }
                    })
                 }

                this.$http.get(url)
                    .then(res => readBlobAsText(res.body))
                    .then(text => {
                        console.log(text);
                    })