javascript - TypeError : str. replace is not a function strange error with 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 中的 header 值应该是 string 类型，而不是 boolean。

---

详情

我实际上并没有在 Vue 资源文档中看到这一点，但是查看源代码很容易看到:

header (see here) 的 set 方法调用 trim 函数:

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

trim 假定值是一个字符串 ( see here ):

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

其他说明

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

有关此 header 和其他跨源请求问题的更多信息，您可以阅读 the MDN docs on CORS