Javascript 将CreateReact应用程序与ExpressJs一起使用

好的，我有一个非常简单的应用程序。现在，我使用ExpressJS来处理API调用，我正在componentWillMount（）方法中的react应用程序中使用$.ajax（）方法进行调用

因此，React前端只有一个简单的表单，其中包含一个输入字段，并按如下方式提交：

import React, { Component } from 'react';
import $ from 'jquery';
import './App.css';

class App extends Component {


  componentDidMount(){

      $('form').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
          url: '/api',
          type: 'post',
          data: $('form').serialize(),
          dataType: 'json',
          success: function(data) {
            console.log('successful ajax request made!');
          }
        });

      });
  }

  render() {
    return (
      <div className="App">
        <form method="POST">
          <input type="text" name="title" />
          <input id="submit" type="submit" />
        </form>
      </div>
      );
  }
}

export default App;

问题

当使用npm start运行create-react-app时，它会转到localhost:3000对网页本地开发服务器执行操作，当我使用节点服务器/app.js在我的服务器目录中启动我的app.js时，它会转到localhost:3001，因为它们不能在同一个服务器中运行港口

由于这个原因，我无法进行适当的API调用，而不会得到一个错误，显示POST请求失败

现在的黄金问题是如何在两个不同端口上从本地服务器进行API调用？

---

如果你需要更多关于我代码的信息，我很乐意发布。非常感谢您的帮助，谢谢

如果我没弄错的话，您的前端运行在localhost:3000上，而后端运行在local:3001上，所以您正在寻找一种解决方案，在两个不同的端口上从前端到后端发出请求？如果是这样，我相信您需要使用baseUrl调用后端，http:localhost:3001/api\u call\u

        $.ajax({
          url: 'http:localhost:3001/api',
          type: 'post',
          data: $('form').serialize(),
          dataType: 'json',
          success: function(data) {
            console.log('successful ajax request made!');
          }
        });

---

您必须在

package.json中设置此行：

"proxy": "http://localhost:PORT"

是您在Express服务器中设置的端口号

因此，Webpack本地开发服务器知道必须调用哪个URL才能访问Express运行的API。
在现有的client Package.json文件中添加这一行

"proxy": {
   "/api/*": {
      "target": "http://localhost:3001"
   }
}

我正在考虑您的前端在端口3000上运行，并且您正在请求您的express服务器所依赖的端口3001。
进行更改后，请关闭现有前端服务器并重新启动它。热重新加载不会更新Package.json文件。
现在，您对
/api/
的所有请求都将直接路由到您的端口3001
非常感谢您的回复，我尝试过，出于某种原因，我在后端控制台中得到的唯一东西是一个空对象。因此，我没有得到序列化的表单数据，也没有在我的ajaxsuccess方法中得到“成功发出ajax请求”的消息。所以我猜post请求没有成功通过。不，我没有得到任何错误，但我没有得到数据登录到我的后端控制台，就像我希望的那样。知道req.body为什么没有记录通过的数据吗？我也猜post请求没有成功，这就是为什么没有调用成功回调的原因，您可以尝试提供错误回调并记录它以了解错误是什么。或者，您可以在任何Rest客户机中尝试上面的请求来记录错误以及我的答案的旁注，我建议您更改jQuery（因为它很大）的包
fetch
，因为它是一个标准化API，用于在现代浏览器中统一
XMLHttpRequest
调用，使用polyfills支持较旧的浏览器。这解决了我的问题，我的
create react app
dev server+api服务器只运行
“代理：”http://localhost:3001“
正在运行。这导致了404，但仅在Firefox上出现
http://localhost:3001/sock-js/node/
。很好的解决方案你帮了我很多。现在，我的开发服务器在Firefox上再次恢复正常，API也可以正常工作了。
"proxy": {
   "/api/*": {
      "target": "http://localhost:3001"
   }
}