Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined

[ivitivan]

Hi!

I'm trying to use your library but I get an error:

Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined

I was using your example

axios.get('https://api.github.com/users/benjamingeorge')
  .then(function (res) {
    console.log(res.data);
  })
  .catch(function(res) {
    if(res instanceof Error) {
      console.log(res.message);
    } else {
      console.log(res.data);
    }
  });

The error happens here.
I'm using browserify and chrome 45.

[ivitivan]

I messed up in the code. Everything works fine now.

[mzabriskie]

Would you mind sharing what you did wrong for future reference?

[ivitivan]

Actually, I can not even reproduce the error now.

[aljones]

I got this error from: axios.post('/api' [this.props.query]) If you don't see it, the comma is missing between the arguments. I tested this in node too.

> var f = function(s, a) { return { s, a }};                                      
> f('s', ['a'])                                 
{ s: 's', a: [ 'a' ] }                          
> f('s' ['a'])                                  
{ s: undefined, a: undefined }

So I guess the error is related to an argument being undefined. I'm surprised that isn't a syntax error.

[zhangjinling]

I also meet this question.But I also can send get and post request.
I use it in VUE,when I use Vue.use(axios);,not do otherthing .The error occured.
isURLSameOrigin.js?94c0:57 Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined
chrome : 55.0.2883.87 m

[vpiskunov]

Any solution? I am also using it with Vue.use(axios)
isURLSameOrigin.js?142d:61 Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined
Perhaps could be about the way we import it into VueJS? There doesn't seem to be any docs on how to properly import it to Vue, especially when using Webpack...

Any ideas greatly appreciated!

[rookiebulls]

@vpiskunov Maybe it's because you are using the origin axios, not a vue plugin, you should use Vue.prototype.$axios = axios if you want vue's instance to call it

[cuihj]

https://github.com/imcvampire/vue-axios

[dannypule]

I was getting this error due to the url being undefined. Was fixed after I addressed that issue.

[rohmanhm]

I got same problems guys, but I'm not using Vue.
It's happend when I process the response.data using window object, but when I just console.log(response.data) this not show any errors.

[vpiskunov]

@rohmanhm That's because the Ajax request runs on a separate isolated "thread"-like environment. You might have some luck by calling .bind(this) or .bind(window)

[rohmanhm]

@vpiskunov would you give me some example?

[hongyue-yue]

I am also using it with Vue.use(axios)
isURLSameOrigin.js?142d:61 Uncaught (in promise) TypeError: Cannot read property 'protocol' of undefined
when I remove 'Vue.use(axios)',it is ok

[EmadAdly]

If you use vue or another just

import axios from 'axios'

And use Axios normally without using Vue.use(axios)

Everything works fine

[hicaku]

Hey, when I write Vue.use(axios); in main.js I get "Uncaught ReferenceError: axios is not defined" error and it dows not change when I delete it. How can I solve this problem?

Thanks in advance!

[beipiaoyu2011]

If you use:
import axios from 'axios';
axios.defaults.baseURL = process.env.BASE_URL;
export default axios;

The error occurs

[mr-twady]

Using Laravel VUE JS, I experienced this same issue. This fixed it for me however -
window.axios = require('axios'); in resources/js/bootstrap.js already scaffolds axios. You wouldn't need to do Vue.use(require('axios')); in resources/js/app.js.
In my own case, this was the issue, so I removed it from app.js.

[bagaskarala]

i solved my own with deleting Vue.use(axios)

[zhaoweih]

I was getting this error due to the url being undefined. Was fixed after I addressed that issue.

this work for me,thank you

[Lustellz]

I got same problems guys, but I'm not using Vue.
It's happend when I process the response.data using window object, but when I just console.log(response.data) this not show any errors.

Same here. I'm not using axios, though.

[krisunni]

i solved my own with deleting Vue.use(axios)

This worked for me.

[xyznaveen]

i solved my own with deleting Vue.use(axios)

Same here don't know why tho.

[MichaelTimbes]

I think it was mentioned in an earlier comment by @rookiebulls , I am using Axios as a plug-in via Vue.use(VueAxios, axios) and what worked for me was calling axios from the Vue context by using Vue.$axios .

[vitvnua]

i solved my own with deleting Vue.use(axios)

thanks! This worcked for me!!

[rabar1995]

install both of axios and vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

that's worked for me

[azamatz]

my issue for this problem:
1.
import axios from 'axios';
import VueAxios from 'vue-axios';

2. Vue.use(VueAxios, axios); // order important

[franpesca]

I solved it by removing the import in my main.js file.
So, I removed both
import axios from "axios",
and Vue.use(axios)

[andrey-lazarev]

Had the same error with bootstrap form. $form.on('submit', (event) => event.preventDefault() solved the issue.

[mamadfar]

GuyyyyyyyyyyyyyyyyyyyyyyyyyYYYYYYYYYYYYYYYYYYYYYYYYYYYyyyyyyyyyyyyyyyyyyyyyyyyyyyS

just use this 4 line code and DONE !

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios' ### this line is important for destroy :) 'protocol' ERROR ###

Vue.use(VueAxios, axios)

.
.
.
JUST DO THIS !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[mossa-Sammer]

I faced this in React.js and no solution