Question

我正在构建一个简单的React App，该应用程序通过对Express服务器的axios API调用来执行CRUD操作。

我面临的问题是，我所有使用路径参数表达路由的API请求都给出了404。（Cannot GET /api/user/2）。有效的API是没有路径参数的任何GET或POST路由。失败的API是所有包含路径参数的路由，其中包括GET和POST请求。

我的React层使用http-proxy-middleware通过src目录中的单个setupProxy.js文件将API调用从UI路由到快速后端。

setupProxy.js

const proxy = require('http-proxy-middleware')

module.exports = function(app) {
    app.use(proxy('/api', { target: 'http://localhost:8080' }))         
}

裸露的骨头反应axios代码段

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：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /api/user/2/questions</pre>
</body>
</html>

更新我通过在React到Express的axios请求中不使用模板化字符串来解决了这个问题。

axios.get(`/api/user/${this.state.userId}/questions`)

成为

var url = "/api/user/" + this.state.userId
axios.get(url)

我不确定使用模板字符串时将发送哪种类型的字符串来表示。如果有人可以阐明这一点，那么整个问题仍然是有效的。

在路径参数上对Express Server 404反应Axios请求

0 个答案: