Angular 5 HttpClient PUT请求在Firefox中未执行但Chrome中正常

这种跨浏览器的请求差异确实挺闹心的，结合你用Angular 5 + CouchDB开发的场景，我整理了几个常见的排查方向和解决方案：

1. 确认请求是否被真正触发 #

Angular的HttpClient返回的是Observable，它是懒执行的——也就是说，如果你只调用了createUser()方法但没有订阅这个Observable，请求根本不会发送！Chrome可能因为某些缓存或浏览器特性“意外”执行了，但Firefox严格遵循这个规则。

检查你的代码，确保调用createUser时加上了订阅：

this.databaseService.createUser(...)
  .subscribe({
    next: (res) => console.log('用户创建成功', res),
    error: (err) => console.error('请求失败', err)
  });

2. 检查CouchDB的CORS配置 #

Firefox对跨域资源共享（CORS）的预检请求（OPTIONS）处理比Chrome更严格，如果CouchDB的CORS配置不完整，PUT请求会被浏览器拦截。

你可以通过CouchDB的管理界面（Futon）或者curl命令更新配置：

# 启用CORS
curl -X PUT http://你的数据库地址/_config/httpd/enable_cors -d '"true"'
# 允许前端域名（替换成你的实际域名，*表示允许所有，生产环境不建议用*）
curl -X PUT http://你的数据库地址/_config/cors/origins -d '"http://localhost:4200"'
# 允许携带认证信息
curl -X PUT http://你的数据库地址/_config/cors/credentials -d '"true"'
# 允许PUT等方法
curl -X PUT http://你的数据库地址/_config/cors/methods -d '"GET,PUT,POST,DELETE,OPTIONS"'

3. 完善Angular请求配置 #

确保你的PUT请求带上正确的请求头和认证配置，比如：

// 在createUser方法里完善PUT请求部分
createUser(id: string, email_: string, password_: string, firstname: string, surname_: string, role: string): Observable<any> {
  const obj: object = { 
    name: firstname, 
    surname: surname_, 
    role, 
    email: email_, 
    password: password_, 
    theme: 'indigo', 
    projects: {}, 
    widgets: {} 
  };
  
  return this.http.put(`${auth}/${id}`, obj, {
    withCredentials: true, // 如果CouchDB需要认证，必须开启这个
    headers: new HttpHeaders({
      'Content-Type': 'application/json' // 确保请求体是JSON格式
    })
  });
}

4. 排查Firefox浏览器设置 #

临时关闭Firefox的增强跟踪保护（地址栏左边的盾牌图标），或者在about:config里修改以下配置：

• 设置network.cors.preflight.max_cache_size为0，避免预检请求缓存导致的问题
• 确保network.http.sendRefererHeader设置为2（默认值，避免Referer问题）

5. 查看Firefox开发者工具 #

打开Firefox的F12开发者工具，切换到Network标签，筛选PUT请求：

• 如果看不到PUT请求：说明代码里没触发（比如没订阅Observable）
• 如果看到OPTIONS请求返回403/400：说明CORS配置有问题
• 如果PUT请求返回错误：根据响应状态码和错误信息进一步排查

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