Vue-resource: No response data in Chrome.

[websanova]

Hello,

This is a bit of a strange issue to report, but it seems to be coming from vue-resource 1.x.

So basically things were working fine for a while, but I think a recent version of Chrome stopped displaying response data with vue-resource.

Chrome Version 56.0.2924.87 (64-bit)

The strange thing is that: It only occurs immediately following an OPTIONS request. If for instance I make a request with no authorization header it's fine. But if I make a CORS request with Authorization header it will fire the OPTIONS request first. I can see the response of that. But the subsequent response does not display.

NOTE: There is only issue with the response displaying. All my code and the plugin otherwise works perfectly fine.

I'm using Laravel and have stripped down the example to bare bones so it's plain php and the problem persisted. When I did a straight xmlhttp request:

~~~
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
       // if (xmlhttp.status == 200) {
           console.log(xmlhttp.responseText);
       // }
       // else if (xmlhttp.status == 400) {
          // alert('There was an error 400');
       // }
       // else {
       //     // alert('something else other than 200 was returned');
       // }
    }
};

xmlhttp.open("GET", "https://hs.api.laravel-starter.com/api/v1/auth/user", true);
xmlhttp.setRequestHeader('Authorization', 'Bearer: eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczovL2hzLmFwaS5sYXJhdmVsLXN0YXJ0ZXIuY29tL2FwaS92MS9hdXRoL3JlZnJlc2giLCJpYXQiOjE0ODc4NTYyODIsImV4cCI6MTQ4OTExMjAyNywibmJmIjoxNDg3OTAyNDI3LCJqdGkiOiI3cGlrOEp6Q2d1a3hmMnRSIiwic3ViIjoxfQ.WJINr9wxSxkJj5raI8ljEMl_0RUs6ncXcGwFFmaEc84');
xmlhttp.send();

}

loadXMLDoc();
~~~

The problem went away. I was doing this in my root app component of Vue. I also tried using axios and the problem also seems to have gone away. So makes me think there is an issue here.

Vue 2.1.10
Vue Router 2.2.0
Vue Resource 1.2.0 & 1.0.3

[websanova]

Further investigation has now led me to the response interceptor when using next.

~~~
this.options.Vue.http.interceptors.push(function (request, next) {

// Trigger OPTIONS request by setting Authorization header.
request.headers.set('Authorization', 'Bearer: testabcd1234');

// Response displays ok!
next();

// Response does not display.
next(function (response) {
    console.log(response);

    return response;
});

});
~~~

Seems when we add a callback something gets messed up.

[steffans]

Can you create a example for this on https://jsfiddle.net, for further debugging.

[websanova]

https://jsfiddle.net/tpnucv5m/

[websanova]

Seems someone else has been able to confirm.l this issue. You can check the issue here:

http://stackoverflow.com/questions/42172505/chrome-no-response-data-after-options-request

[steffans]

I updated the fiddle to log the response.body object which is the parsed JSON response. Works for me in Chrome 56.0.2924.87. See https://jsfiddle.net/tpnucv5m/1/

[websanova]

NOT console.log.

Check the dev tools => Network tab. Click on the request following an
options call and see if it shows you anything in the "response" tab.

On Feb 28, 2017 17:54, "Steffan" [e-mail] wrote:

I updated the fiddle to log the response.body object which is the parsed
JSON response. Works for me in Chrome 56.0.2924.87.

https://jsfiddle.net/tpnucv5m/1/

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/pagekit/vue-resource/issues/566#issuecomment-283008225,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy2HoHPsjv3N-ovpQEnlMmT8m-2aNks5rg_zggaJpZM4MKwqR
.

[steffans]

This seems to be an issue with the Chrome dev tools when responseType = blobis used on the XHR. It seems to also happen when using the native fetchAPI, see https://bugs.chromium.org/p/chromium/issues/detail?id=457484

For example the dev tools of Firefox show the proper response.

[websanova]

Right, but if you don't use vue-resource, just vanilla js it's all good.
I'm not sure about the details, but it's a bit tough using vue-resource at
this point. Is there any way this can be addressed?

On Tue, Feb 28, 2017 at 9:46 PM, Steffan [e-mail] wrote:

This seems to be an issue with the dev tools when responseType blobis
used on the XHR. It seems to also happen when using the native fetchAPI,
see https://bugs.chromium.org/p/chromium/issues/detail?id=457484

For example the dev tools of Firefox show the proper response.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/pagekit/vue-resource/issues/566#issuecomment-283057992,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcy1w25PBUS-uAcWLT5ExQjByXwYgeks5rhDMtgaJpZM4MKwqR
.

[websanova]

So seems there is a fix for this to not set the responseType to 'blob'?

http://stackoverflow.com/questions/42172505/chrome-no-response-data-after-options-request

Not sure if this will affect other things though.

[BrainBacon]

Wow after a very tough time Googling I finally found this issue. I had no idea it could be vue-resource, so I wasn't searching for it. I also can confirm that I cannot see response data because of an options request.

[gabrieloliverio]

@steffans The workaround provided by @websanova worked for me.

[websanova]

Yes, it's simple fix, but not deployed on CDN.

On Mar 25, 2017 05:24, "Gabriel Olivério" [e-mail] wrote:

@steffans https://github.com/steffans The workaround provided by
@websanova https://github.com/websanova worked for me.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/pagekit/vue-resource/issues/566#issuecomment-289157394,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABkcyw-xzLTmK0e0EsmWn1EYgevwBPpgks5rpEKQgaJpZM4MKwqR
.

[ibrahimabdo]

I've created a pull request with a fix to this issue. Basically it allows you to set custom responseType in options.

https://github.com/pagekit/vue-resource/pull/584/files

[steffans]

I could also change the default responseType to text in order to have Chrome devtools working again. However this will break the current support for blobs, to work with blobs again a responseType has be set globally or on each request. Any thoughts on this?

[ibrahimabdo]

Have a look at the change that I've made in the pull request. Isn't it supposed to change responseType only if you explicitly tell it to do? Otherwise it will still keep blob.

Just curious, what was the reason for defaulting everything to blob?

[steffans]

@ibrahimabdo I know your pull request doesn't change the current behavior, however i guess it's better to have working Chrome devtools by default. Thats why i am asking to change it.

Defaulting everything to blob was a solution to avoid adding an extra option responseType to set the type.

[ibrahimabdo]

I've made an update to my pull request. I've made it to default to empty string, which basically it's the default one, if request.responseType is not set.

[abishekrsrikaanth]

what is the ideal fix for this till the PR gets merged?

[steffans]

Merged in v1.3.0