Question

好的，我有一个非常简单的应用create-react-app。现在我正在使用 ExpressJS 来处理我在 componentWillMount（）<中的反应应用内部使用 $。ajax（）方法进行的API调用/ strong>方法。

因此所有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本地开发服务器执行操作使用节点服务器/ app.js 在我的服务器目录中启动 app.js ，将转到 localhost：3001 ，因为它们无法在同一个港口。

因此，如果没有显示POST请求失败的错误，我就无法进行正确的API调用。

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

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

Answer 1

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

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

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

Answer 2

如果我理解正确，你的前端运行在localhost：3000而后端运行在本地：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。

在ExpressJs中使用Create-React-App

3 个答案: