Vue resource response does not return an object on Forge

I am using Homestead on my local environment and everything is working as intended. When I deploy to Forge 99% of my App works just fine except for one part of my Javascript. I am using Vue and have defined a component where I am pulling out data using Vue Resource. I did some digging and here is the difference I found.

I am using the following code in a Vue component:

getTypes() {
      // Fetch price entries from the database
      this.$http.get('/api/roomTypes/'+this.start_date+'/'+this.end_date+'/'+this.totalCompanions())
          .then( response => {
            if(response.status != 200) {
              this.swal(response.data)
            } else {
              this.roomTypes = response.data
              this.loading = false
            }
      })
    }

Homestead yields a proper Javascript object for this.roomTypes

Forge for some reason is returning the following although I don't understand why it is different. Do I need to use response.json().data instead?

ashwinmram

9 years ago

Level 27

The issue turned out to be related to LetsEncryt SSL which I had activated on Forge. Once SSL was disabled the behaviour returned back to normal, i.e. a Javascript object was returned.

ashwinmram

8 years ago

Best Answer

Level 27

The root cause of the issue was some browser versions were returning a Json object as response data, whereas others were returning a Json string.

Once I discovered this I turned on the SSL... (yay!!) and then implemented this method in my components:

    makeJsonObject(data) {
      if(typeof data == 'string') {
        return JSON.parse(data)
      }
      return data
    }

I then passed the response data into this method.

this.roomTypes = this.makeJsonObject(response.data)

Please or to participate in this conversation.