Node.js 如何将react js前端与express api后端连接

我正在尝试从我的前端创建一个到express后端的axios post请求

我已经尝试将代理语法包含到我的json包中，以便它可以与之交互，我也尝试过

这是我的client package.json

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

  "proxy": "http://localhost:5000",

这是我的api请求

axios
      .post('api/users/register', newUser)
      .then(res => console.log(res.data))
      .catch(err => this.setState({ errors: err.response.data }));

这是我的express后端，请注意，我有一个处理每个api的api文件夹

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const passport = require('passport');

const users = require('./routes/api/users');
const posts = require('./routes/api/posts');
const movies = require('./routes/api/movies');

const app = express();

// Body parser middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// Connect to MongoDB
mongoose
  .connect("<my mongo db>", { useNewUrlParser: true })
  .then(() => console.log('MongoDB Connected'))
  .catch(err => console.log(err));

// Passport middleware
app.use(passport.initialize());

// Passport Config
require('./config/passport')(passport);

// Use Routes
app.use('/api/users', users);
app.use('/api/posts', posts);
app.use('/api/movies', movies);

const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server running on port ${port}`));

const express=require（'express'）；
const mongoose=require（'mongoose'）；
const bodyParser=require（'body-parser'）；
const passport=require（‘passport’）；
const users=require（'./routes/api/users'）；
const posts=require（“./routes/api/posts”）；
const movies=require（“./routes/api/movies”）；
常量app=express（）；
//体解析器中间件
use（bodyParser.urlencoded（{extended:false}））；
use（bodyParser.json（））；
//连接到MongoDB
猫鼬
.connect（“，{useNewUrlParser:true}）
.然后（（）=>console.log（'MongoDB Connected'））
.catch（err=>console.log（err））；
//Passport中间件
app.use（passport.initialize（））；
//护照配置
要求（'./配置/护照'）（护照）；
//使用路线
应用程序使用（'/api/users'，users）；
应用程序使用（'/api/posts'，posts）；
app.use（'/api/movies'，movies）；
const port=process.env.port | 5000；
app.listen（端口，（）=>console.log（`Server running on port${port}`））；

但我的react应用程序正在3000端口上运行

我希望它在控制台中输出一条成功消息，但下面是我得到的

POSThttp://localhost:3000/api/users/register 404（未找到）xhr.js:166

---

这表明它没有与我的包json代理通信。

尝试添加到package.json中。 ... “代理”：{ “/api”：{ “目标”：“， “安全”：错误 } },

---

…

尝试在package.json中添加。 ... “代理”：{ “/api”：{ “目标”：“， “安全”：错误 } },

---

…

我认为问题可能来自提交到express api路由的表单的jsx值。尝试以下解决方案，其中一个可能会成功

确保组件窗体的值与快速路线中的值相同

请尝试并记住将代理添加到package.json中

---

这应该可以解决问题。

我认为问题可能来自提交到express api路由的表单的jsx值。尝试以下解决方案，其中一个可能会成功

确保组件窗体的值与快速路线中的值相同

请尝试并记住将代理添加到package.json中

---

这应该可以解决问题。

您的express配置是什么？我认为您的代理应该在脚本之前object@DimitarTsonevexpress服务器工作正常。我已经和邮递员和警察一起测试过了insomnia@TanveerSinghBhatia我试过了，没用。你在后台使用的是

cors

吗？你的express配置是什么？我想你的代理应该在脚本之前object@DimitarTsonevexpress服务器工作正常。我已经和邮递员和警察一起测试过了insomnia@TanveerSinghBhatia我试过了，没用。你在后台使用的是

cors

？