Axios错误(404)在React.js / Firebase应用程序:POST http://localhost:3

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)

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

在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应用。