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文檔