vue.jsaxiosdbpedia

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


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);
      })
    }
  },

Solution

  • 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.