将 Create-React-App 与 ExpressJs 一起使用答案

【问题标题】：Using Create-React-App with ExpressJs将 Create-React-App 与 ExpressJs 一起使用
【发布时间】：2017-02-13 06:43:51
【问题描述】：

好的，所以我有一个非常简单的应用程序，create-react-app。现在我正在使用 ExpressJS 来处理我使用 $.ajax() 方法在 componentWillMount() 方法。

所以所有的 React 前端都有一个简单的表单，有 1 个输入字段并像这样提交：

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;

现在我的特快路线是这样的：

var express = require("express");
var router = express.Router();

router.post("/api", function(req, res, next){
    console.log(req.body);
});

module.exports = router;

问题

当使用 npm start 运行 create-react-app 时，它会转到 localhost:3000 到 Webpack 本地开发服务器，当我使用 node server/app.js 在我的服务器目录中关闭我的 app.js 会转到 localhost:3001 因为它们无法在同一个端口。

因此，我无法进行正确的 API 调用，而不会收到表明 POST 请求失败的错误。

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

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

【问题讨论】：

作为我回答的旁注，我建议您为包 fetch 更改 jQuery（因为它的大小），因为它是用于尝试统一 XMLHttpRequest 调用的标准化 API在现代浏览器中，使用 polyfill 支持旧浏览器。

标签： javascript node.js api express create-react-app

【解决方案1】：

在您现有的客户端 Package.json 文件中添加这一行

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

我正在考虑您的前端在 PORT 3000 上运行，并且您正在向 Express 服务器所依赖的 PORT 3001 发出请求。进行更改后，终止现有的前端服务器并重新启动它。热重载不会更新 Package.json 文件。现在您对/api/ 的所有请求都将直接路由到您的 PORT 3001

【讨论】：

这解决了我在运行 create-react-app 开发服务器 + api 服务器时仅运行 "proxy:"http://localhost:3001" 的问题。这导致了 404，但仅限于 Firefox 上的 http://localhost:3001/sock-js/node/。很好的解决方案，你帮了我很多。现在我的开发服务器在 Firefox 上再次正常刷新，并且我的 API 正常工作。

【解决方案2】：

如果我理解正确，您的前端在 localhost:3000 上运行，而后端在 local:3001 上运行，因此您正在寻找一种解决方案，以便在 2 个不同的服务器上发出从前端到后端的请求端口？如果是这样，我相信您需要使用 baseUrl 调用后端，http:localhost:3001/api_call_here

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

【讨论】：

非常感谢您的回复，我试过了，出于某种原因，我在后端控制台中得到的唯一东西是一个空对象。所以我没有得到序列化的表单数据，也没有在我的 ajax 成功方法中得到消息，上面写着“成功的 ajax 请求！”。所以我的猜测是发布请求没有成功通过。不，我没有收到任何错误，但我没有像我希望的那样让数据登录到我的后端控制台。知道为什么 req.body 没有记录通过的数据吗？
我也猜post请求不成功，这就是为什么不调用成功回调的原因，您可以尝试提供错误回调并记录它以了解错误是什么。或者，您也可以在任何 Rest 客户端中尝试上述请求来记录错误

【解决方案3】：

你必须在你的package.json这行设置：

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

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

因此，Webpack 本地开发服务器知道必须调用哪个 URL 才能访问 Express 运行的 API。

【讨论】：