Question

我正在尝试从我的React前端向我的Express后端创建axios发布请求

我尝试将代理语法包括在我的json包中，以便它可以与之交互，并且我还尝试了React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED)

这是我的客户端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。 ... “代理”： { “ / api”：{ “ target”：“ https://localhost:5000”， “安全”：错误 } }， ...

Answer 2

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

确保组件表格的值与快递路线中的值相同
尝试configure your proxy manually，并记住还要将代理添加到您的package.json中。

这应该可以解决问题。

如何将React JS前端与Express api后端连接

2 个答案: