How to fix 'TypeError: name.toUpperCase is not a function' in axios

Question

I want to get data from dbpedia endpoint, with axios in vue js.

I use axios.get to get data from dbpedia, and i got and error in console say :

TypeError: name.toUpperCase is not a function

How can i fix it?

created(){
    this.fetch();
  },
  methods: {
    fetch(){
      axios
      .get('http://id.dbpedia.org/sparql?query=SELECT+DISTINCT+?concept+WHERE+{+?s+a+?concept+}+LIMIT+50', {
        headers: 'Access-Control-Allow-Origin: *'
      }).then(response => {
        /* eslint-disable */
        console.log('SUCCESS');
        console.log(response);
      }).catch((e) => {
        console.log(e);
      })
    }
  },

Answer 1

You need to change your Axios request to this:

methods: {
async fetch () {
await axios.get('https://cors.io/?http://id.dbpedia.org/sparql?query=SELECT+DISTINCT+?concept+WHERE+{+?s+a+?concept+}+LIMIT+50', {
            headers: {'Access-Control-Allow-Origin': *},
             mode: 'cors',
          }).then(response => {
            /* eslint-disable */
            console.log('SUCCESS');
            console.log(response.data);
          }).catch((e) => {
            console.log(e);
          }
     }
}

Five changes:

1) Made Axios headers an object (note where the quotation marks are)

2) console.log(response.data)

3) Added mode: 'cors'

4) Added cors prefix to URL, since you're retrieving data from a third-party domain outside your hosting environment

5) Wrapped your fetch function in async await, since axios is a promise-based library.

Answer 2

Similar issue was face by me in my learning phase and solved by making the headers as object instead of string :

headers: { 'Access-Control-Allow-Origin': true }