Angular+Node.js搜索功能异常：Postman返回undefined、网页报404

1. Postman返回undefined的原因及修复 #

你的Node.js接口是GET请求，但你用req.body.q获取参数——GET请求的参数不会放在请求体里，而是存在URL的查询字符串中，必须用req.query.q来获取。

修改Node.js接口代码：

app.get('/search',(req,res)=>{
    // 替换req.body.q为req.query.q
    const query = req.query.q;

    db.table('users').filter({username: query}).withFields(['username','password']).get()
    .then(user =>{
        if (user){
            res.json({user});
        }
        else{
            res.json({message:`NO USER FOUND WITH username: ${query}`});
        }
    }).catch(err => res.json(err)); 
});

如果需要模糊搜索（而非精确匹配用户名），建议用参数化查询实现LIKE匹配（避免SQL注入风险）：

const sql = `SELECT username, password FROM users WHERE username LIKE ?`;
db.query(sql, [`%${query}%`], (error, results)=>{
    if (error){
        res.status(500).send({error:'Error executing SQL query'});
    }
    else {
        res.json(results.length ? {user: results[0]} : {message:`NO USER FOUND WITH username: ${query}`});
    }
});

2. Angular端404错误的修复 #

Angular直接调用/search会默认指向前端自身的域名端口，而你的Node.js服务大概率运行在另一个端口（比如3000），导致路径不匹配。有两种修复方式：

方案一：直接指定完整API路径 #

修改Angular组件的search方法：

search(){
    // 替换3000为你的Node服务实际端口
    this.http.get('http://localhost:3000/search', { params: { q: this.query}}).subscribe(results => {
        this.results = results.user || []; // 接口返回结构是{user: ...}，需提取对应字段
    });
}

方案二：配置Angular代理（推荐） #

在项目根目录创建proxy.conf.json：

{
    "/api/*": {
        "target": "http://localhost:3000",
        "secure": false,
        "logLevel": "debug"
    }
}

修改package.json的启动命令：

"scripts": {
    "start": "ng serve --proxy-config proxy.conf.json"
}

之后Angular组件中可通过代理路径请求：

search(){
    this.http.get('/api/search', { params: { q: this.query}}).subscribe(results => {
        this.results = results.user || [];
    });
}

3. 额外注意事项 #

• 跨域问题：如果不用代理，需在Node.js中启用CORS，安装cors包后添加：

  const cors = require('cors');
  app.use(cors());
  

• 模板判断逻辑调整：接口返回的是{user: ...}或{message: ...}，原模板的*ngIf="results.length"会失效，建议修改为：

  <div *ngIf="results.length > 0">
    <h3>Search Results</h3>
    <ul>
      <li *ngFor="let result of results">
        {{ result.username }}
      </li>
    </ul>
  </div>
  <div *ngIf="results.length === 0 && query">
    <p>没有找到匹配的用户</p>
  </div>
  

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