Hi,

Does anyone knows how to do a http:post via Vue-resource from a different domain?

Thanks in advanced!

Cheers
Ralee

Hi, I just simply use this method to load async data from cross site domain, it successfully works in Chrome(44.0.2403.157), safari(8.0.7 (10600.7.12)), firefox(39.0.3) and IE 11 to 10(including the default edge mode), but in IE9, the running code just jump into the '.error(function(){})' code block, as a result I got an error info. I'm not sure is something wrong with my code or just the $http.get method does not support IE 9?

I have following global config :

Vue.http.headers.common['X-CSRF-TOKEN'] = document.getElementById('csrf_token').getAttribute('content');
Vue.http.options.emulateJSON = true;

I have a request like :

vm.$http.post('/url', {email: '[email protected]'}, function() { ... });

The + char is removed and I do not find why.
Chrome send : my-email [email protected]

this.$http.patch(url + '/apps/' + id, data, handler)

But failed.

And if I add toUpperCase() to options.method in xhr.js like

request.open(options.method.toUpperCase(), url(options), true);

The patch method successful

Hi there, do I need to specify something different or any type of header info to upload a file with vue.resource POST?

When chaining success and error callbacks on this.$http.get(...).success(...).error() even with alternate syntax, this.$http.get(...., function(){...}, function(){...}) both callbacks fire. To be clear the ajax call is a success. In the former syntax, the error callback gives 'data' and 'status' as undefined, however 'request' is 'TypeError: exp.trim is not a function'. In the later syntax the message get a little more verbose with a stack trace: Uncaught (in promise) TypeError: exp.trim is not a function.

Futher investigation (clicking thru on the first line of the stack trace) points to this portion of code:

/**

• Parse an expression into re-written getter/setters.
  *
• @param {String} exp
• @param {Boolean} needSet
• @return {Function}
  */

exports.parse = function (exp, needSet) {

exp = exp.trim()

I am using Vue 0.12.16 and Vue-resource 0.1.16 via npm install and requires; On Laravel 5.1, latest everything else, except Homestead (current 2.7 latest at the time of this comment is 3.0). Just getting started with Vue, love it so far, but its so simple it's overly delicate, like a hollywood blonde. Not sure if this is a bug or if my novice a** is just doing something wrong. Feedback would be lovely.

Cheers!

It would be nice to add an example to documentation with cross domain request and how to get data from response properly. Because this topic raises many questions. Thanks.

I would like to post following multi-dimensional data array to server.

data: {
    actorData: [
        {
          "id": 1,
          "name": "Hugh Jackman",
        },
        {
          "id": 2,
          "name": "Tom Hardy",
        },
    ]
}

methods: {
    saveActorsInfo: function() {
        var that = this;
        this.$http.post('/actors/saveinfo', that.actorData, function(response) {
                alert('Actors Saved Successfully!');
        }).error(function () {
                alert('Error in saving actors!');
        });
     },
}

The problem is server is receiving no data. (I am using Laravel). So How I can achieve it?

I'm trying to make a request from my Vue-script to the same domain but IE9 won't allow it. See issue #43

I think the docs should be updated so other people doesn't make the misstake as me, thinking it would work.

I've made JS-bin with the problem.
http://jsbin.com/bafeco/edit?html,output

Edit:
Seems like SuperAgent suffers from this as well. Is there a work around? Asking the user to disable the XSS filter isn't the best idea I'm guessing

Edit 2:
Tried disabling XSS-filter in IE9, still doesn't work. Also tried setting CORS to allow all origins just in case on my api endpoint. Same problem

Hello,

I use Vue.js with Browserify and debowerify transform. It works fine but not with vue-resource :/

Code:

var Vue = require('vue');
var Resource = require('vue-resource');
Vue.use(Resource);

Error:

Uncaught TypeError: plugin.apply is not a function

If I do a console.log() of vue-resource the function returns an empty object.

Any idea?

Thank's :)

The docs says we can use:

Vue.http.transforms.request.push(function (options) {
return options;
});

but searching through the source I found no occurrence of transforms..

How can I set emulateJSON to true for particular request like:

resource.update({id: id}, data) // .then(...).catch(...)
resource.save(data) // .then(...).catch(...)

I've been looking into source, if I'm not mistaking, I can't pass those options here.
Note: I can't to use vm.$http, as this code is outside of vm and want to also avoid setting it globally: Vue.http.options.emulateJSON = true.

Thanks

When I add require('vue-resource') line my code then i got Vue is not defined in console.

Any plans to support aborting a request midflight?

jQuery just uses the underlying XMLHttpRequest's abort method:

var jqxhr = $.get('api/foo');

jqhxr.abort();

Angular uses this weird timeout promise dance:

var aborter = $q.defer();

$http({
    method: 'get',
    url: 'api/foo',
    timeout: aborter.promise,
});

// This aborts the request:
aborter.resolve();

Aborting a request midflight is very important in countless scenarios. For example in a typeahead, where - in addition to debouncing/throttling the actual request - you'd want to cancel the existing request when the user starts typing again.

Hey.

I really feel like the documentation is lacking. Many things aren't explained especially the config parts. For example, what is the crossOrigin property in the config? What value should it have? Same for emulateHTTP and emulateJson. It would be great if we could get a better understanding of that.

Also, there isn't any Vue.http.transform.request or response transformer. I keep getting that I can't set a method on an undefined property.

I'm also looking for a way to do afterRecieve or something like that where I can inspect the response and if I get for example a 401 response destroy the login to my app and redirect to the login page. As it stands doesn't seem like I can hook to the response object and inspect it globally.

Hello.

I've noticed that each request sends an OPTION request before the the actual request. Why is that? I don't want to send an OPTION request before each request I want to make.. that only adds to the time it takes for the actual request and seems redundant.

How can I disable it?

Opening the discussion on this.

We are aiming for something that will be sugar for REST apis, and not necessarily different transport adaptors, REST / Socket / localStorage / Firebase etc

Roadmap states if something solid exists, use instead or build on top of. Are there any solid examples out there?

I do not use AMD or CMD; after I import vue.js and vue-resource.js , I use Vue.use(VueResource), then Uncaught TypeError: Cannot redefine property: $url; how to resolve this problem?

error line: 234
Object.defineProperty(Vue.prototype, '$url', {

For large data sets this is a very handy feature since the user doesn't have to wait for the request to complete , integrating it with Vue's tracking system and animation would make data visualization wonderful

I am trying to bind server response message using $http.post after adding a contact. How I can bind server response to responseText ?

addContact: function(){

    var contact = this.newContact;

    this.contacts.push(contact);

    this.$http.post('api/contacts', contact);

    this.responseText = response.message;

}

Can anyone help me out.?

Hi

i have resource like this

var resource = this.$resource('api/resources/:uuid')

resource.get({uuid: 123}) // works --> api/resources/123
resource.get({uuid: '34bfa653-ffe8-482c-9847-43925835ee42'}) // not works --> api/resources?uuid=34bfa653-ffe8-482c-9847-43925835ee42

Any idea how to set uuid as id, not replace it as query parameter?

Thanks

I'm trying to do a post request to a server with form-data but I can't get it to work. When I do it with postman it works, but with the $http.post it's not working. Any idea how to solve the problem?

Vue.http.jsonp('http://www.baidu.com/xx:yy:zz*', function (){ });

But it realy set rquest url is

http://www.baidu.com/xx*?callback=_jsonpxxxxxxx

Why others after the colon disappeared.
Bug?

I would love to see the success method pulled into its own chainable method the same way that error is done. So some potential code could be:

this.$http.get('/my-url')
    .success(function (data) {
        // success logic
    })
    .error(function (data) {
        // error logic
    });

In my opinion, this would clean up some slopping looking code from having a callback method as one of the parameters of the get, post, etc., methods.

Could you please add the package to npm registry?

@steffans, it would be nice to see the list of important changes that have happened in each of the releases of this repo similar to vue.js repo (https://github.com/yyx990803/vue/releases). It gives the developer an gist of whether there are any important updates that requires one to upgrade or if the new fixes are only new features and good to haves..

Currently only the monkey-patched success/error/always methods get the parsed JSON result. Using the standard then callback only gives you the raw xhr request.

Can we please also resolve/reject the actual promise with the parsed data?

Replacing this:

if (this.status >= 200 && this.status < 300) {
    resolve(this);
} else {
    reject(this);
}

with something more like this:

complete(this.status >= 200 && this.status < 300 ? resolve : reject, this);

function complete(completer, xhr) {
    completer({ xhr: xhr, result: parseReq(xhr)[0] });
}

This way you can get the result directly in the callback, without parsing it again yourself:

this.$http.get('users').then(function(response) {
    this.users = response.result;
}.bind(this));

And if you're using ES6, parameter destructuring makes this really nice:

this.$http.get('users').then(({ result: users }) => { this.users = users });

The reason I really want this is because I don't want to use the monkey-patched success/error callbacks. They're nice to use occasionally, but they break the promise chain (once we get proper Promises/A+ compliant promises, chaining then calls becomes a reality).

In addition, if we'll implement request/response interceptors (à la angular), we'll definitely need to properly chain promises.

        var data = {name:this.name,phone:this.phone,num:this.xhr};
         console.log(data)
        this.$http.post('location.href, data,function (data, status, request) {


  }).error(function (data, status, request) {

  })

在php里 var_dump($_POST) == array(0) { } ?
应该是 array(3) { ["name"]=> string(2) "32" ["phone"]=> string(2) "23" ["num"]=> string(1) "0" }才对啊

is the options include this attribute 'async' like jQuery ?

Not sure if possible, but I would like the possibility to alter the response content before is returned, similar to the beforeSend callback. The main purpose is to alter the response when performing tests.

https://github.com/marmelab/restful.js

Hello,

I think I'm getting Options instead of GET or POST because of some CORS issues, how can I prevent this?

Thanks.

Hello,

I'm trying to call a method on this.$http.post when the request has received a response, wether it has been successful or not.

I've tried this.$http.post(...).done(function(data, status) {}); but it doesn't work:
Uncaught TypeError: this.$http.post(...).error(...).done is not a function

Is there any way to achieve this?

when run this code to post to a django rest-api
this.$http.post(
'../book/',
this.newBook,
function (result){
this.books.unshift(this.newBook);
}
)

return error info this:
+++++++++++++++++++++++++++++++++++++++
RuntimeError at /book
You called this URL via POST, but the URL doesn't end in a slash and you have APPEND_SLASH set. Django can't redirect to the slash URL while maintaining POST data. Change your form to point to 127.0.0.1:8000/book/ (note the trailing slash), or set APPEND_SLASH=False in your Django settings.

Request Method: POST
Request URL: http://127.0.0.1:8000/book
Django Version: 1.8.3
++++++++++++++++++++++++++++++++++++++++
when i Insert a blank space after the url like this，it's run properly.
this.$http.post(
'../book/ ',
this.newBook,
function (result){
this.books.unshift(this.newBook);
}
)

Hi,

I have an issue with callback execution after upgrading to 0.1.6 or 0.1.7.

When I am receiving a BAD REQUEST from the server instead of the error callback to be executed, the success callback does. Can anyone else confirm this?

Thanks in advance!

I would liek to show a image loading up during the process of the http request to the server.
How do i do that on this?

this.$http.get('install/, function (data, status, request) {
    console.log(status)   
}).error(function (data, status, request) {
})

The docs make it seem like JSONP is supported, but I'm having problem actually implementing JSONP, I keep getting CORS errors.

Is it actually possible to do JSONP?

Hi,

I'm a beginner in VueJS and, after many times on Google i can't found any solution :
When i want to configure vue-resource in global like that : (app.js file)

Vue.use(VueResource);
Vue.http.options.root = 'http://127.0.0.1:1337';
Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

Webpack don't like me at all, why ?

Thanks for your help !

Would be cool to have as part of the data an errorHandler that gets called on any HTTP error returned, globally.

As an example: https://github.com/zerqu/qingcheng/blob/master/lib/xhr.js#L67

Would be super handy...

// src/resource.js line 102
Resource.actions = {
        get: {method: 'get'},
        save: {method: 'post'},
        query: {method: 'get'},
        remove: {method: 'delete'},
        delete: {method: 'delete'}        
    };

Thanks for releasing vue-resource library. It's more convenient to call RESTful APIs. But, why default actions don'ts have update: {method: 'put'} method? (I add it by myself now)

Thanks.

Hi,

I've been trying to pass an authorization header to the http request and it doesn't seem to be working. I'm not entirely sure if this is the right way to do it, perhaps you know of a way to achieve this?

new Vue({

  el: '.container',

  ready: function() {

    this.fetchNode();

  },

  methods: {
    fetchNode: function() {

      this.$http.headers.common.Authorization = 'Basic YXBpOnBhc3N3b3Jk';

      this.$http.get('/node/1', function(node) {
        this.$set('node', node);
      });

    }
  },

});

Thanks!

It would be nice to be able to cancel an request.

for instance when a user is browsing pages, if he/she clicks to quickly to the next one multiple times the app will keep firing requests. I'd like to be able to only keep the latest active.

Thanks !

As titled. Not sure how to use this with browserify. I've installed via npm pointing to this repo, and it's in node_modules, but I'm not sure what to require()

what is someData??the data which is in my .jsonfile? or the data which is in my Vue instance? i am new at this.

When I define the root url globally;

Vue.http.options = {
  root: 'http://...'
};

The get method doesn't accept data anymore.

this.$http.get('endpoint', { foo: 'bar' })

Error: Cannot set property 'foo' of undefined

Working JSFiddle: http://jsfiddle.net/wzopw800/1/
Non-working JSFiddle: http://jsfiddle.net/wzopw800/ (see console)

We should be able to set the timeout on promises/requests, and handle accordingly

Hi,

Everything is ok in chrome, and FF (I tried it quickly) but with IE it's not working and I got this message (translated from french).

SCRIPT5007: Impossible to define « success » proprety of a null or undefined reference

Here's my code (I'm using it with Laravel) :

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');

new Vue ({
el: '#loginForm',

data: {

    loginRequest : {
        email: '',
        password:''
    },
    email_txt:'Username / email',
    password_txt:'Mot de passe',
    error: ''
},

methods: {
    onSubmitForm: function(e) {
        e.preventDefault();
        this.$http.post('auth/login', this.loginRequest, function (errors) {

            alert(  JSON.stringify(errors) + "\nStatus: " + status);

            if (errors) {
                if (errors.email) {
                    if (errors.email) {
                        this.email_txt = errors.email
                    }
                    if (errors.password) {
                        this.password_txt = errors.password
                    }
                }
                else (alert('couple pas bon!'))
            }
            else {

            location.reload();
            }
        }).error(function (data, status, request) {
            alert('error')
        })

    }
}

});

Hey.

I saw the new commit of the develop branch which presents the concept of interceptors which is great.

I was thinking that in case we want to check the response and potentially respect the user based on that response we can't really do that without having to globally expose the App and bind it to the window or something. At lest we would need to do that for the router instance (which exposes the app anyways..) - I'm taking Vue-router as an example.

I think it can be really nice if the interceptors would have an access to the current VM just like the callback functions have.

Currently, the callback is called with 3 parameters: callback(result, status, xhr). This is supplied by the parseReq function.

However, this is only done for the success, error & always methods (and by extension, the callback passed to the initial call). The actual promise returned still resolves to just the raw xhr object.

I think it would make more sense to pipe the promise directly into parseReq:

promise = promise.then(parseReq, function(request) {
    var promise = new Promise(function(resolve, reject) {
         reject.apply(promise, parseReq(request));
    }));

    return promise;
});

Then the aliases become just that: aliases.

var aliases = Object.create(null, {
    'success' : 'then',
    'error'   : 'catch',
    'always'  : 'finally',
});

for (var alias in aliases) {
    promise[alias] = promise[aliases[alias]].bind(promise);
}

The only issue here is that sadly most current promise implementations do not support multi-value fulfillment. We can either pass an array to then, or just pass the parsed result.