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

vue.js axios dbpedia

13,511

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

Solution 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 }

13,511

Author by

Mar_TO

Updated on June 24, 2022

Comments

Mar_TO about 2 years

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

Mar_TO about 5 years

If i use tha code i got a error : from origin 'localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Mar_TO about 5 years

Thanks @LenJoseph It's Work
Len Joseph about 5 years

Great! Please accept this answer when you get a chance.
Mar_TO about 5 years

Hey @LenJoseph that code that u mention above that's work fine, but it get data from dari uri is very slow. How can i improve that ?
Len Joseph about 5 years

What do you mean by slow? How long does it take?
Mar_TO about 5 years

When i go that page that contain that code, it get data from uri it's slow, about 6 - 8 second
Len Joseph about 5 years

There are many things that could slow it down. If they have high traffic or other server issues, that could slow the response. If your local bandwidth is low, that will also be a factor. I'm not familiar with this API, but I see you've limited the response to 50 items, which should be relatively fast from a data volume perspective. Does your console log show any errors when you make the request?
Mar_TO about 5 years

Yea, in my console it takea few second to get the data, sometime i get error : from origin 'localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Mar_TO about 5 years

I call this code from method in vue, when i already get the data the console still running to get data, and it can't stop
Len Joseph about 5 years

Please see edit to my answer. I added async and await for your axios getter. This will return a promise for your API call.