TypeError：str.replace不是vue.js Ajax调用的函数奇怪错误

Question

我收到一个奇怪的错误： vue-resource.common.js Uncaught TypeError: str.replace is not a function ，它似乎与我正在获取一些数据的ajax调用有关：

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

我是vue.js的新手，真的不确定如何调试它。任何指针都很棒。

非常感谢。

Answer 1

摘要

发生这种情况是因为Vue Resource中标头的值应该是string类型，而不是boolean 。

---

细节

我实际上在Vue资源文档中没有看到这一点，但是通过查看源代码可以很容易地看到：

Header的set方法（ 请参阅此处 ）调用trim函数：

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

trim假定该值为字符串（ 请参见此处 ）：

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

其他注意事项

如问题评论中所述，您使用此标头的方式不正确。 Access-Control-Allow-Origin标头是在Response而不是请求上使用的标头。 从技术上讲，这与错误无关，但是值得一提。

有关此标头和其他跨源请求问题的更多信息，您可以阅读CORS上的MDN文档