Question

我的react应用程序中的express.js动态路由存在问题。一切都可以在localhost上运行，但是当我部署时我得到400。这是链接：https://shoppyshop.herokuapp.com/item/1

您在控制台中看到的错误为400。我的目标是从Express的index.js中设置的那条路由中正确获取数据。

app.get('/api/item/:id', function (req, res) {
    let find = data.filter((el => {
        return el.product.id == req.params.id
    }))
    res.json(find)
    console.log('found item')
})

我知道快递有问题。我可能使用了错误的方法，因此它想从错误的路径获取图标并保存文件。正在谷歌搜索，找不到类似的问题。如何解决？这是获取数据的组件：

export default class ItemInfo extends Component {
    constructor(props) {
      super(props)

      this.state = {
         data: []
      }
    }

    componentDidMount = () => {
        axios.get(`/api/item/${this.props.match.params.id}`)
            .then(res => {
                const data = res.data;
                this.setState({
                    data,
                    fetched: true
                })
            })
    }

  render() {
      console.log(this.props.match.params.id)
    return (
      <div className="App">
      <SideBar pageWrapId={"mainpage"} outerContainerId={"MainPage"} />
      <div id="mainpage">
          <TopBar />
          <More data={this.state.data} fetched={this.state.fetched}/>
          <Footer />            
      </div>
  </div>
    )
  }
}

这是我正在处理的代码的分支：https://github.com/KamilStaszewski/shoppy/tree/itemrouting/client

我的express.js文件：

const express = require('express');
const path = require('path');
const data = require('./apiData');

const app = express();

// Serve the static files from the React app
app.use(express.static(path.join(__dirname, 'client/build')));
app.disable('etag');


app.get('/category/:category', function (req, res) {
    let find = data.filter((el => {
        return el.product.category == req.params.category
    }));
    res.json(find);
    console.log('found category');
});

app.get('/api/item/:id', function (req, res) {
    let find = data.filter((el => {
        return el.product.id == req.params.id
    }))
    res.json(find)
    console.log('found item')
})

// An api endpoint that returns a short list of items
app.get('/api/data', (req, res) => {
    var questions = data
    res.json(questions);
    console.log('Sent list of items');

});




// Handles any requests that don't match the ones above
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/client/public/index.html'));
});

const port = process.env.PORT || 5000;
app.listen(port);

console.log('App is listening on port ' + port);

更新：

经过多次提交和推送，我找到了答案。我不知道它的正确方法，但是它有效。问题出在：

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/client/public/index.html'));
});

我不是从build提供索引，而是从public那里提供索引，而public里面没有js。为了使它起作用，我更改为：

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + '/client/build/index.html'));
});

现在可以使用了。

Answer 1

我很确定这是您如何在Express中提供静态文件的问题。

从快速文档中获取：

app.use（'/ static'，express.static（'public'））

现在，您可以从以下位置加载公共目录中的文件：   / static路径前缀。

http://localhost:3000/static/images/kitten.jpg

http://localhost:3000/static/css/style.css

http://localhost:3000/static/js/app.js

http://localhost:3000/static/images/bg.png

http://localhost:3000/static/hello.html

但是，您提供给express.static函数的路径是   相对于您从中启动节点进程的目录。如果   您从另一个目录运行Express App，则使用   您要提供的目录的绝对路径：

app.use（'/ static'，express.static（path.join（__ dirname，'public'）））

您的代码具有以下服务静态代码：

app.use(express.static(path.join(__dirname, 'client/build')));

因此，如果我在阅读您的代码时正确阅读了以下内容，我将理解为：

当您收到/的请求时，其余的呼叫将在client/build中搜索数据。对于您来说，对于您对get的{{1}}请求，服务器可能会读取该请求，以尝试在/api/item/:id中找到静态文件。

相反，要提供静态文件，我可能会考虑将它们放在名为“ public”之类的目录中，然后将您的提供静态文件更改为类似以下内容：

client/build/api/item/:whatevertheitemidis

综上所述，我可能对app.use('/public', express.static(path.join(//Wherever you keep your static files)));的某些细微差别有误，因此请务必签出documentation。无论哪种方式，我都希望至少已为您指明了正确的方向。如果您注释掉您的服务静态行并向邮递员提出请求，您应该会看到它按预期工作。

更新

我看了看你的代码，发现了几件事：

我刚刚删除了您的代码，端点正在运行。我尝试了express.static，它提供了预期的数据。
看来，您提供静态资产（例如您的收藏夹图标）的问题是因为html中收藏夹图标网址的http://localhost:5000/api/data部分。据我所知，您的代码中没有任何东西可以将其转换为实际路线。我将其转为%PUBLIC_URL%/后，一切都按预期开始工作。

Express.js路由404

1 个答案: