React.js/Firebase应用程序中的Axios错误(404):POST http://localhost:3000/login 404(未找到) [英] Axios error (404) in React.js / Firebase app: POST http://localhost:3000/login 404 (Not Found)

问题描述

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

I have a problem: I can't connect frontend (react.js) with backend (firebase). For that, I use Axios.js. When I try to log in, I've got an error:

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
                })
            })
}

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

The same problem is with getting data from backend.

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)

home.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
    

将

Axios 导入到这些 js文件中，并将代理设置在 package.json 中.我不知道自己在哪里弄错了.

Axios is imported in these js files and the proxy is set in package.json. I can't figure out where I made mistake.

**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

By the way, all routes work in Postman

任何人都可以帮助我解决这些错误吗?预先感谢！

Can anyone please help me to fix these errors? Thanks in advance!

推荐答案

您的代理服务器必须是这样的字符串.

Your proxy needs to be a string like this.

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

它也必须位于文件的根目录中，而不要嵌套在 browserslist 下.

And it also need to be in the root of the file not nested under browserslist as you have it.

请注意，您需要在更改 package.json 文件后重新启动react应用.

Note that you need to restart your react app after making changes to your package.json file.

这篇关于React.js/Firebase应用程序中的Axios错误(404):POST http://localhost:3000/login 404(未找到)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！