好的,我有一个非常简单的应用程序 create-react-app 。现在,我使用 ExpressJS 来处理我在 componentWillMount()< 内的 React 应用程序中使用 $.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;
THE PROBLEM
当使用 npm start 运行 create-react-app 时,它会转到 localhost:3000 对 Webpack 本地开发服务器执行操作,当我使用 node server/app.js 在我的服务器目录中触发我的 app.js 会转到 localhost:3001 因为它们无法在相同的端口。
因此,我无法进行正确的 API 调用,除非收到显示 POST 请求失败的错误。
现在最重要的问题是如何从本地服务器的 2 个不同端口进行 API 调用?
如果您需要有关我的代码的更多信息,我将非常乐意发布。非常感谢您的帮助,谢谢!
最佳答案
在现有客户端 Package.json 文件中添加此行
"proxy": {
"/api/*": {
"target": "http://localhost:3001"
}
}
我正在考虑您的前端在端口 3000 上运行,并且您正在向 Express 服务器所依赖的端口 3001 发出请求。
进行更改后,终止现有前端服务器并重新启动它。热重载不会更新 Package.json 文件。
现在,您对 /api/
的所有请求都将直接路由到您的 PORT 3001
关于javascript - 将 Create-React-App 与 ExpressJs 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42198062/