将参数传递给链式 Get 请求会导致 404 崩溃

Question

我正在尝试使用 TS/Express 服务器查询外部 API。理想情况下，用户会选择产品。这将触发对服务器的 GET 请求，然后服务器会将查询提交给外部 API 以获取价格信息。

这个项目只是为了好玩和学习，所以请原谅我的非课堂方法。它将被重构为类，我只是想让它暂时工作。

// product.route.ts
import { Express } from "express"
import { getProductData } from "../controllers/product.controller"

// We don't need to write products into a DB if we can retrieve pricing via API
// We are not processing payments
// K.I.S.S.
const productRoute = (app: Express) => {
  app.get("/api/v1/product", getProductData)
}

export { productRoute }

// product.controller.ts
const getProductData = async (req: Request, res: Response) => {
  try {
    const query: string = nike
    // const { query } = req.body
    const api: string = `https://api.exchange.shoes.com/products/${query}/stats`
    const response: AxiosResponse = await axios.get(api)
    let queryObj = await res.json(response.data)
    return queryObj
  } catch (error) {
    res.json({ error })
  }
}

export { getProductData }

当我执行上述操作时，它将起作用。但是，如果我想让它动态化并在前端有一个表单，用户可以在其中输入“adidas”，我将如何将其传递到 api url？我以为我可以解构 req.body，并让前端发送 {“product”：“nike”}，但是当我尝试收到 404 时。

有什么线索或想法吗？我几乎认为我的路线应该是一个帖子而不是一个获取，但你应该只返回一个 200 w/一个帖子。相反，您实际上不应该将 req.body 发送到 GET（您可以它只是没那么有用）。

小修改：或者，由于我不需要将凭据传递给此 API 端点，我是否应该将其留给前端并在后端忘记它。

Answer 1

// product.controller.ts
const getProductData = async (req: Request, res: Response) => {
  try {
    
    const { product } = req.body
    const api: string = `https://api.exchange.shoes.com/products/${product}/stats`
    const response: AxiosResponse = await axios.get(api)
    let queryObj = await res.json(response.data)
    return queryObj
  } catch (error) {
    res.json({ error })
  }
}

export { getProductData }

由于您决定从前端发送键名为 product 的 req.body

你应该改变

const {query} = req.body

进入

const {product} = req.body

这意味着您必须将 url 上的动态变量更改为 product 而不是 query