TypeError：str.replace与vue.js Ajax调用不是函数奇怪的错误 [英] TypeError: str.replace is not a function strange error with vue.js Ajax call

问题描述

我收到一个奇怪的错误： vue-resource.common.js Uncaught TypeError：str.replace不是函数，它似乎与ajax调用有关我正在取得一些数据：

  export default {
 data :(）=> （{
食谱：[] 
}），
 ready（）{
 this。$ http.get（'http：// localhost：3000 / recipes'，{
标题：{
'Access-Control-Allow-Origin'：true 
} 
}）。then（（recipes）=> {
 this。$ set （'食谱'，食谱）
}）
} 
}; 
  

我是vue.js的新手并且真的不确定如何调试这个...任何指针都会是很棒。

非常感谢。

解决方案

摘要

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

---

详细信息

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

set 标题的方法（见这里）调用 trim 函数：

  set（name，value）{
 this.map [normalizeName（getName（this.map，name）|| name）] = [trim（value）]; 
} 
  

trim 假设值是一个字符串（见这里）：

 导出函数trim（str）{
 return str？ str.replace（/ ^ \s * | \s * $ / g，''）：''; 
} 
  

其他备注

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

有关此标题和其他Cross Origin请求问题的更多信息，您可以阅读关于CORS的MDN文档

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.

解决方案

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

这篇关于TypeError：str.replace与vue.js Ajax调用不是函数奇怪的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！