如何在Angular 5中发送POST请求？附代码报错求助

嘿，我帮你排查下这段代码里的问题，几个关键点导致了报错：

问题分析 #

• HttpParams使用错误：HttpParams是不可变对象，调用set()方法后必须重新赋值给变量，否则你的参数根本没被添加进去。
• 请求体格式不匹配：你设置了Content-type: application/json，但却用HttpParams传参——这是用来拼接URL查询参数的方式，JSON格式的POST请求应该把参数作为**请求体（body）**发送。
• 语法错误：URL模板字符串有语法问题，return语句里的括号也不匹配，这些都会直接导致代码报错。

修正后的代码 #

addSite(address: string, username: string, password: string, device_token: string, os_type: string) {
  // 设置请求头
  this.headers = new HttpHeaders()
    .set('Content-Type', 'application/json');
  // 注意：Access-Control-Allow-Method是响应头，不是请求头，不需要在请求里设置

  // 构造JSON格式的请求体
  const body = {
    username: username,
    password: password,
    device_token: device_token,
    os_type: os_type
  };

  // 拼接正确的API地址，修复模板字符串语法
  const apiUrl = `${address}${Config.API_URL}`;

  // 发送POST请求，传递body作为请求体
  return this.http.post(apiUrl, body, { headers: this.headers });
}

额外说明 #

• 关于跨域：Access-Control-Allow-Method是后端需要返回的响应头，前端请求里设置这个没用，如果遇到跨域问题，需要后端配置CORS规则。
• 类型标注：给函数参数加上类型标注，能让代码更健壮，也方便IDE提示。
• 不可变对象：Angular的HttpHeaders也是不可变的，不过你这里的写法没问题，因为每次都重新赋值了this.headers。

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