VueJS项目GET请求报错TypeError: str.replace is not a function求助

看了你的代码和报错信息，问题其实出在请求头的参数类型上，跟then回调完全没关系——这也是为什么你简化回调后还是报错的原因。

问题根源 #

你在配置$resource的headers时，把existingUsers设置成了一个数组：

headers: { existingUsers: this.existingUsers }

而HTTP请求头的所有字段值都要求是字符串类型。Vue Resource内部在处理请求头的时候，会对每个值执行字符串相关的操作（比如replace方法），但数组没有这个方法，所以直接抛出了TypeError: str.replace is not a function。

你能正常打印this.existingUsers，说明数组本身是没问题的，只是传给请求头的时候类型不符合要求。

解决方案 #

把数组转换成后端能识别的字符串格式就行，常见的两种方式：

1. 如果后端期望接收JSON格式的数组：

this.usersResource = this.$resource('http://127.0.0.1:3000/api/users', {}, {}, { 
  headers: { existingUsers: JSON.stringify(this.existingUsers) } 
})

2. 如果后端期望接收逗号分隔的ID字符串（比如"1,2,3"）：

this.usersResource = this.$resource('http://127.0.0.1:3000/api/users', {}, {}, { 
  headers: { existingUsers: this.existingUsers.join(',') } 
})

具体用哪种取决于后端接口的约定，你可以跟后端确认或者先测试第一种。

补充说明 #

你提到这个语法在其他地方正常，应该是其他地方的请求头参数都是字符串类型，没有传数组的情况，所以没触发这个问题。

内容的提问来源于stack exchange，提问作者Adrien Merlier