如何将 React js 前端与 express api 后端连接起来

Question

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

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

这是我的客户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 }));

这是我的快递后端，注意我有一个 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}`));

但是我的 React 应用程序运行在端口 3000

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

POST http://localhost:3000/api/users/register 404 (Not Found) xhr.js:166

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

Answer 1

尝试添加 package.json。 ... "proxy"：{ “/api”：{ "target": "https://localhost:5000", "secure": 错误 } }, ...

Answer 2

我认为问题可能出在提交给快速 api 路由的表单的 jsx 值。尝试以下解决方案，其中之一可能会起作用

确保组件表单的值与快速路由中的值相同
尝试 configure your proxy manually 并记得将代理添加到您的 package.json。

这应该可以解决问题。

如何将 React js 前端与 express api 后端连接起来

How to connect react js frontend with express api backend

node.js

reactjs

express

create-react-app