React代理，服务器的响应状态为404(未找到)

Question

默认情况下，我在localhost:3000上运行。我想向localhost:8072发送一个带有代理设置的请求。我已经完成了代理设置，但我遇到了一个错误。

此外，终端显示错误

npm ERR！类型："系统"，npm ERR！错误号："ECONNREFUSED"，npm ERR！代码："ECONNREFUSED"，npm ERR！父级：'流程管理器'npm ERR！npm ERR！如果您支持代理，请确保npm ERR！'proxy的配置设置正确。请参阅：'npm help config'FetchError:请求http://localhost:8072/失败，原因：连接ECONNREFUSED 127.0.0.1:8072

我把我的代码放在下面。

此外，我在终端中看到这样一个错误。

package.json

`

{
"name": "process-manager",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.6",
"@testing-library/react": "^11.2.2",
"@testing-library/user-event": "^12.2.2",
"axios": "^0.21.0",
"http-proxy-middleware": "^1.0.6",
"proxy": "http://localhost:8072",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.1",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

`

src/setupProxy.js

`

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:8072',
changeOrigin: true,
})
);
};

`

登录.js

`

import React, { useState } from 'react';
import querystring from 'querystring';
import axios from 'axios';
import classes from './LoginPage.module.css';
import { useHistory } from "react-router-dom";
const LoginPage = (props) => {
const [emailState, setEmailState] = useState();
const [passwordState, setPasswordState] = useState();
const history = useHistory();
const handleSubmit = async (e) => {
e.preventDefault();
try {
const response = await axios.post(
// 'http://localhost:8072/oauth/token',
'api/oauth/token',
querystring.stringify({
username: emailState,
password: passwordState,
grant_type: 'password',
provider: 'default'
}),
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ZGV2Z2xhbi1jbGllbnQ6ZGV2Z2xhbi1zZWNyZXQ='
}
}
)
console.log(response.data);
} catch (error) {
return alert(error);
}
history.push('/');
};
return (
<div className={classes['login-page']} >
<form onSubmit={handleSubmit}>
<h1 className={classes['login-header']} >Login</h1>
<div className="classes.block">
<label>
Email:
</label>
<input type="email"
name="email"
required
className={classes['classes-inputs']}
onChange={e => setEmailState(e.target.value)} />
</div>
<div className={classes.block}>
<label>
Password:
</label>
<input type="password"
name="password"
autoComplete="on"
required
className={classes['classes-inputs']}
onChange={e => setPasswordState(e.target.value)} />
</div>
<div className={classes.block}>
<input type="submit" value="Login" onSubmit={handleSubmit} />
</div>
</form>
</div>
)
}
export default LoginPage;

`

我哪里做错了？你能帮我吗？

Answer 1

尝试更改

来自

const response = await axios.post(
'api/oauth/token',

至

const response = await axios.post(
'/api/oauth/token',