使用 React Router 和 Express 的 Ajax POST 到后端答案

【问题标题】：Ajax POST to Backend Using React Router and Express使用 React Router 和 Express 的 Ajax POST 到后端
【发布时间】：2017-07-30 18:49:44
【问题描述】：

我正在尝试在 React 组件中提交一个简单的表单：

class UploadPartList extends Component {

  constructor(props) {
    super(props);
    this.state = { data: [] };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log('Clicking submit');
    $.ajax({
      type: "POST",
      url: "/partListUpload",
      success: function(){
        console.log("Post success");
      },
      error: function(xhr, status, error) {
        console.log(error);
      }
    })
  }

  render() {
      return (
        <div>

          <form id="csvForm" action='' onSubmit={this.handleSubmit} method='post' encType="multipart/form-data">
            <p>upload your part number list (.xls or .csv)</p>
            <input id="uploadCSV" type="file" name="csv_form" />
            <input type="submit" className="submitButton" />
          </form>

        </div>
      );
  }
}

我的 routes.js 文件是这样的：

import React from 'react';
import { Router, Route } from 'react-router';

import App from './components/App';

const Routes = (props) => (
  <Router {...props}>
    <Route path="/" component={App} />
  </Router>
);

export default Routes;

我在服务器中的 Express 路由是这样定义的：

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

app.use('/partListUpload', upload.single('csv_form'), partListUploadController);

app.post('/partListUpload', function(req, res) {
  res.send(req.body);
});

但是，当我尝试提交表单时，我收到了 404 错误。似乎 React 需要 React Router 定义的路由，而不是我在服务器中定义的路由。

我查看了类似的 StackOverflow 问题，但没有找到可行的解决方案。如何点击我在后端定义的路线？

【问题讨论】：

Ajax 调用中的 url 相对于应用程序的根目录是否绝对正确？
除了示例中的URL，我还尝试了“../partListUpload”和“../../partListUpload”。都不工作。在所有这三种情况下，控制台都会记录消息“POST localhost:3000/partListUpload404（未找到）”，这似乎表明它们都在尝试相同的 URL。

标签： ajax node.js reactjs express react-router

【解决方案1】：

看来我的问题是我的 Express 服务器实际上没有运行。我使用create react app 包创建了这个应用程序。然后我跟着this guide 使用 Express 进行设置。但是，我继续尝试通过在 CLI 中运行 npm start 而不是 npm run build 然后 node server/index.js。现在可以了。

【讨论】：

我现在也有同样的问题。我使用 npm start 并注释掉所有快速路由代码，一切正常，但文件上传不起作用。您需要特快路线吗？我的好像什么都没做？我也不知道如何将文件写入服务器。可以分享partListUploadController 代码吗？
我实际上最终无法让它与 partListUploadController 一起工作。由于路由本身并没有很大的中间件，所以我直接把它放在服务器文件中。试试这样：const referenceDBParse = require('../models/referenceDBParse'); 然后app.post('/referenceUpload', upload.single('reference_form'), referenceDBParse.parseReference, function(req, res) { res.redirect('/adminDashboard'); }); 自从我最初发布此代码以来，我的代码发生了很大变化，但这条路线很好地说明了这一点。