与ExpressJ一起使用Create-React-App

Question

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

所以所有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开始它去到localhost：3000做对的WebPack本地开发服务器，当我与节点服务器我的服务器目录火了我的app.js / app.js是去为localhost：3001，因为它们不能在同一端口中运行。

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

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

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

Answer 1

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

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

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

Answer 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!');
          }
        });

Answer 3

您必须在package.json设置以下行：

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

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

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