Я создаю простое приложение React, которое выполняет операции CRUD посредством вызовов API Axios на сервер Express.
Проблема, с которой я сталкиваюсь, состоит в том, что все мои запросы API для экспресс-маршрутов с параметрами пути дают 404. (Cannot GET /api/user/2). Рабочие API - это любые маршруты GET или POST без параметров пути. Сбой API - это все маршруты, которые содержат параметры пути, включая запросы GET и POST.
Уровень My React использует промежуточное программное обеспечение http-proxy для маршрутизации вызовов API из пользовательского интерфейса в экспресс-бэкэнд с одним файлом setupProxy.js в каталоге src.
setupProxy.js
const proxy = require('http-proxy-middleware')
module.exports = function(app) {
app.use(proxy('/api', { target: 'http://localhost:8080' }))
}
Голые кости React axios snipet
getUser() {
axios.get(`/api/user/${this.state.userId}/questions`)
.then((response) => {
if(response.data.id !== undefined) {
this.setState({
id: response.data.id
})
}
})
}
Экспресс index.js
const express = require('express');
const bodyParser = require('body-parser');
const app = express()
app.use(bodyParser.json());
var userRoutes = require('./routes/userRoutes.js');
app.use('/api/user', userRoutes);
const port = 8080
app.listen(port, () => {
console.log(`Running on http://localhost:${port}`)
})
userRoutes.js
var express = require('express');
var router = express.Router({});
router.get('/:id/questions', (req, res) => {
console.log("Hitting")
var pathId = req.params.id
res.json({ id: pathId });
})
На вкладке сети Chrome я вижу API 404 со следующим ответом:
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /api/user/2/questions
UPDATE
Я решил проблему, не используя шаблонные строки в моем запросе axios от React до Express.
axios.get(`/api/user/${this.state.userId}/questions`)
становится
var url = "/api/user/" + this.state.userId
axios.get(url)
Я не совсем уверен, какой тип строки отправлялся для выражения при использовании шаблонных строк. Если бы кто-то мог пролить свет на это, тогда вопрос в целом остается в силе.