TypeError: str.replace is not a function strange error with vue.js Ajax call

Question

I am getting a strange error: vue-resource.common.js Uncaught TypeError: str.replace is not a function and it seems to be related to an ajax call I am making to fetch some data:

export default {
    data: () => ({
      recipes: []
    }),
    ready() {
      this.$http.get('http://localhost:3000/recipes', { 
        headers: { 
          'Access-Control-Allow-Origin': true 
        }
      }).then((recipes) => {
        this.$set('recipes', recipes)
      })
    }
  };

I am new to vue.js and really unsure how to debug this... any pointers would be fantastic.

Thanks so much.

Try headers: { 'Access-Control-Allow-Origin': '*' } instead — adeneo
– adeneo, Commented Oct 18, 2016 at 18:05
Hey @adeneo - thanks, tried that, but then getting: No 'Access-Control-Allow-Origin' header is present on the requested resource. — Le Moi
– Le Moi, Commented Oct 18, 2016 at 18:07
Are you making cross-domain calls? If so, the URI you're requesting must allow remote callers. See enable-cors.org for more information. — PatrickSteele
– PatrickSteele, Commented Oct 18, 2016 at 22:22
Thanks Patrick - the rest api is just on a different port from the port the application... Do I still need to allow remote callers in this instance? — Le Moi
– Le Moi, Commented Oct 19, 2016 at 5:34
Yes, you still need to allow remote callers. It's only when the protocol, host and port match that the call is considered to be coming from the "same origin" and not restricted. — PatrickSteele
– PatrickSteele, Commented Oct 19, 2016 at 11:12

Jordan Shurmer · Accepted Answer · 2018-04-01 01:44:21Z

Summary

This is happening because the value of headers in Vue Resource should be a string type, rather than a boolean.

Details

I don't actually see this in the Vue Resource documentation, but looking through the source code it's easy to see:

The set method of a Header (see here) calls the trim function:

set(name, value) {
    this.map[normalizeName(getName(this.map, name) || name)] = [trim(value)];
}

trim assumes that the value is a string (see here):

export function trim(str) {
    return str ? str.replace(/^\s*|\s*$/g, '') : '';
}

Other notes

As discussed in the comments of the question, the way you are using this header is incorrect. The Access-Control-Allow-Origin header is something used on the Response rather than the request. This is technically unrelated to the error, but is something worth mentioning.

For more information on this header, and other Cross Origin request issues you can read the MDN docs on CORS

Collectives™ on Stack Overflow

TypeError: str.replace is not a function strange error with vue.js Ajax call

1 Answer 1

Summary

Details

Other notes

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Summary

Details

Other notes

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related