admin管理员组

文章数量:1332373

I am getting a strange error: vue-resourcemon.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.

I am getting a strange error: vue-resource.mon.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.

• javascript
• ajax
• vue.js

Share Improve this question Follow asked Oct 18, 2016 at 17:53 Le MoiLe Moi 1,02533 gold badges1616 silver badges4141 bronze badges 5

• Try headers: { 'Access-Control-Allow-Origin': '*' } instead – 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 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 for more information. – 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 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 ing from the "same origin" and not restricted. – PatrickSteele Commented Oct 19, 2016 at 11:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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 ments 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

本文标签： javascriptTypeError strreplace is not a function strange error with vuejs Ajax callStack Overflow