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

Please include the code where you are using `name.toUpperCase`. My first guess is you didn't call `toUpperCase()` as a string method, because you left off the parentheses. — Len Joseph, Jun 05 '19 at 12:45
No, I'm saying to edit in the code where you are currently using it in your question, so we can look at how you're using it. — Len Joseph, Jun 05 '19 at 12:47
Hey, your error seems to come from somewhere else. Somewhere you use the toUpperCase method. — Loïc Monard, Jun 05 '19 at 12:47
@LenJoseph I'm not using any name.toUpperCase method. This is just empty template. — Mar_TO, Jun 05 '19 at 12:52
Can you please tell us from which file the error seems to come ? You have the info inside the devtools — Loïc Monard, Jun 05 '19 at 12:56
I check in console, the error come from file name normalizeHeaderName.js?c8af:7 this file come from axios/lib/helpers/normalizeHeaderName.js?c8af:7. — Mar_TO, Jun 05 '19 at 13:03
Without seeing the code and knowing what `name` is or where it was used, all I can say is 1 of 3 scenarios is probably happening: 1) name is not of type `String`, and this cannot take a string method. 2) There is an attempt at string mutation, (e.g., `let string = a; let string = string.toUpperCase()`. This would fail because Strings are immutable, and the new variable requires a different variable name. 3) `toUpperCase` was used without parens. — Len Joseph, Jun 05 '19 at 13:06
`'use strict'; var utils = require('../utils'); module.exports = function normalizeHeaderName(headers, normalizedName) { utils.forEach(headers, function processHeader(value, name) { if (name !== normalizedName && name.toUpperCase() === normalizedName.toUpperCase()) { headers[normalizedName] = value; delete headers[name]; } }); };` That is the code in that file i mention before. That file located in webpack. — Mar_TO, Jun 05 '19 at 13:15
I see, look at the answer in this question: https://stackoverflow.com/questions/49948400/react-axios-get-not-working-log-out-name-touppercase-is-not-a-function — Len Joseph, Jun 05 '19 at 13:30

Len Joseph · Accepted Answer · 2019-06-07T16:27:16.560

6

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.

edited Jun 07 '19 at 16:27

answered Jun 05 '19 at 13:32

Len Joseph

1,406
10
21

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 ? – Mar_TO Jun 07 '19 at 15:49
What do you mean by slow? How long does it take? – Len Joseph Jun 07 '19 at 15:52
When i go that page that contain that code, it get data from uri it's slow, about 6 - 8 second – Mar_TO Jun 07 '19 at 15:54
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? – Len Joseph Jun 07 '19 at 15:56
Yea, in my console it takea few second to get the data, sometime i get error : **from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.** – Mar_TO Jun 07 '19 at 15:59
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 – Mar_TO Jun 07 '19 at 16:00
Please see edit to my answer. I added `async` and `await` for your axios getter. This will return a promise for your API call. – Len Joseph Jun 07 '19 at 16:06

score 3 · Answer 2 · edited Jun 13 '19 at 15:58

3

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 }

edited Jun 13 '19 at 15:58

TallTed

9,069
2
22
37

answered Jun 05 '19 at 13:05

Namrata Bhalekar

31
1

If i use tha code i got a error : **from origin 'http://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 Jun 05 '19 at 13:10

score -1 · Answer 3 · answered Mar 02 '23 at 07:12

-1

for me it was camel case mistake in toUpperCase in js make sure u see for it

answered Mar 02 '23 at 07:12

vrushabh patil

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 09 '23 at 16:03

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

3 Answers3

Linked