React.js / Firebase 应用程序中的 Axios 错误（404）：POST http://localhost:3000/login 404（未找到）

Question

我有一个问题：我无法将前端 (react.js) 与后端 (firebase) 连接起来。 为此，我使用Axios.js 。 当我尝试登录时，出现错误：

POST http://localhost:3000/login 404 (Not Found) 

来自login.js的片段

    handleSubmit =(event) => {
    event.preventDefault()
        this.setState({
            loading: true
        })
        const userData = {
            email: this.state.email,
            password: this.state.password
        }
        axios
            .post('/login', userData)
            .then((res) => {
                console.log(res.data);
                this.setState({
                    loading: false
                })
                this.props.history.push('/')
            })
            .catch((err) => {
                this.setState({
                    errors: err.response.data,
                    loading: false
                })
            })
}

从后端获取数据也是同样的问题。

GET  http://localhost:3000/gossips 404 (Not Found)  
Error: Request failed with status code 404
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:62)

主页.js

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

import Grid from "@material-ui/core/Grid";

import Gossip from '../components/Gossip'

class home extends Component {
    state = {
        gossips: null
    }
    componentDidMount() {
        axios
            .get('/gossips')
            .then((res) => {
                this.setState({
                    gossips: res.data
                })
            })
            .catch((err) => {
                console.log(err);
            })

    }

    render() {
        let recentGossipsMarkup = this.state.gossips ? (
            this.state.gossips.map((gossip) => <Gossip key={gossip.gossipId} gossip={gossip} />)
        ) : (
            <p>Loading...</p>
        )
        return (
            <Grid container spacing={2}>
                <Grid item sm={8} xs={12}>
                    {recentGossipsMarkup}
                </Grid>
                <Grid item sm={4} xs={12}>
                    <p>Profile</p>
                </Grid>
            </Grid>
        )
    }
}

export default home
    

在这些js files中导入Axios ，在package.json中设置代理。 我不知道我在哪里犯了错误。

**package.json**    
    {
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "proxy": [
      "https://europe-west1-chit-chat-75481.cloudfunctions.net/api"
    ]
  },
  "dependencies": {
    "@material-ui/core": "^4.11.3",
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.2",
    "@testing-library/user-event": "^12.6.0",
    "axios": "^0.21.1",
    "dayjs": "^1.10.4",
    "firebase": "^8.2.5",
    "firebase-functions": "^3.13.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "name": "chit-chat",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "version": "0.1.0",
  "devDependencies": {
    "prop-types": "^15.7.2"
  }
}

顺便说一句，所有路线都在Postman

谁能帮我解决这些错误？ 提前致谢！

Answer 1

您的代理需要是这样的字符串。

"proxy": "https://europe-west1-chit-chat-75481.cloudfunctions.net/api"

而且它还需要位于文件的根目录中，而不是像您拥有的那样嵌套在browserslist下。

请注意，对package.json文件进行更改后，您需要重新启动 react 应用程序。