Express 和 create-react-app API 请求答案

【问题标题】：Express and create-react-app API requestExpress 和 create-react-app API 请求
【发布时间】：2018-04-03 08:02:42
【问题描述】：

我正在 localhost:3000 上运行我的 create-react-app 我在 package.json 中设置了一个代理，以指向我的服务器正在运行的位置 (localhost:3001)

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.3.0",
    "react-dom": "^16.3.0",
    "react-scripts": "1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

这是我的app.js 文件：

import React, { Component } from 'react'
import axios from 'axios'

class App extends Component {
  componentDidMount () {
    axios.post('/users')
    .then(res => {
      console.log(res) 
    })
  }

  render() {
    return <div>Hello</div>
  }
}

在我的 users.js 中，它甚至什么都不做：

var express = require('express')
var router = express.Router()

router.post('/users', function(req, res, next) {
  // empty body
}

为什么我会收到 404？为什么它试图从localhost:3000 获取资源？据我了解，设置代理将允许 React 应用程序与 Express 服务器通信。

注意：该请求使用 GET，但我正在尝试执行 POST 请求，并且此错误仅与 POST 一起出现。

编辑：这是我的 Express （部分）配置文件：

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

app.use('/', indexRouter);
app.use('/users', usersRouter);

【问题讨论】：

根据我的猜测，您在端口 3000 上运行您的 react 应用程序，但是您在哪里运行您的 express 应用程序？在哪个港口？
因为你放的是 router.post('/') 而不是 router.post('/users')
您是否使用 Postman 测试过 POSTing 到 /users 以查看您的 Express 路线是否真的有效？
@NirBen-Yair 我的快递应用在 3001 上运行 - app.set('port', 3001);
@patrickhuang94，正如你所说，你在 3001 上运行你的 express 应用程序，控制台中的请求将转到 3000。因此它永远找不到你的 /users 路由

标签： javascript reactjs api express

【解决方案1】：

默认情况下，当 React 在代理上找不到提供的路由（即 localhost:3001）时，它会将您重定向到端口 3000。我想你应该使用 axios.post('/api/users') 而不是你现在使用的。我是 React 新手，所以我可能会弄错，但值得一试。

【讨论】：