Angular 4中如何在HTTP请求中传递URL参数？调用接口遇404错误

嘿，我来帮你分析下这个问题！你遇到的404错误本质是后端找不到你请求的/View/orders资源，结合你的代码，咱们一步步来排查解决：

404意味着后端没有配置对应的GET接口路由，或者你请求的路径和后端实际提供的路径不匹配。先做这两个关键检查：

• 确认后端是否存在GET /View/orders这个接口（注意路径的大小写、拼写，比如是不是/view/orders而非大写的View？）
• 明确后端是期望通过查询参数（比如/View/orders?orderno=xxx）还是路径参数（比如/View/orders/123）来接收订单号。

你的代码里有几个可以调整的地方，结合后端的参数接收方式来修改：

情况1：后端用查询参数接收订单号 #

如果后端期望通过?orderno=你的订单号这种形式接收参数，修改代码如下：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

getOrderbyOrderNo() {
  this.orderno = this.cookie_service.get('key');
  // 先确认cookie里的key是否能正确获取到订单号，避免空值导致请求异常
  if (!this.orderno) {
    console.error('订单号为空，请检查cookie');
    return Observable.throw('订单号为空');
  }

  // 创建查询参数，参数名要和后端期望的完全一致（比如后端要求orderno就写orderno，不是someParamKey）
  let params = new URLSearchParams();
  params.append("orderno", this.orderno);

  // GET请求不需要Content-Type头（因为没有请求体），除非后端明确要求
  return this.http.get('http://localhost:8080/View/orders', { params: params })
    .map(res => res.json()) // 解析响应为JSON格式
    .catch(err => {
      console.error('请求失败:', err);
      return Observable.throw(err);
    });
}

情况2：后端用路径参数接收订单号 #

如果后端的接口路径是/View/orders/{orderno}（比如/View/orders/12345），那直接把订单号拼接到URL路径里：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

getOrderbyOrderNo() {
  this.orderno = this.cookie_service.get('key');
  if (!this.orderno) {
    console.error('订单号为空，请检查cookie');
    return Observable.throw('订单号为空');
  }

  // 拼接路径参数到URL中
  const requestUrl = `http://localhost:8080/View/orders/${this.orderno}`;
  
  return this.http.get(requestUrl)
    .map(res => res.json())
    .catch(err => {
      console.error('请求失败:', err);
      return Observable.throw(err);
    });
}

修改完代码后，打开浏览器的开发者工具（F12），切换到Network标签，发起请求后查看：

• 实际请求的URL是否正确，参数有没有被正确拼接
• 请求的方法是不是GET，状态码还是不是404

如果还是404，那大概率是后端的路由配置问题，需要和后端同学确认接口路径和参数接收方式~

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