React: Axios错误 "Error: Network Error", 我的React应用无法接收axios.post的响应
React: Axios错误 "Error: Network Error", 我的React应用无法接收axios.post的响应
我有一个Node.js Express后端和React前端。
我检查了前端是否向后端发送了请求,并且该请求已发送到后端。
后端向前端发送了响应,但无法接收。
- 前端--请求-->后端检查。请求已到达后端。
- 前端<--响应--后端
在第二个过程中,如果我使用postman接收,则运行正常。
但是,如果我使用前端接收,则无法工作,并且只会抛出错误“错误:网络错误”,没有提供更多信息。
我还尝试了React: Axios Network Error和
Post request Axios : Network error。
Node.js后端:
export const Login = async (req: Request, res: Response, next:NextFunction) => { console.log("登录成功"); res.json({ code: 200, token: "token" }); }
React前端:
const Login = async () => { try { const res = await axios.post('http://localhost:6382/auth/login', { id: "id", password: "password" }); // 出错! } catch (err) { console.log(err); // 显示“错误:网络错误” } }
此外,我的后端
app.js
import * as express from 'express'; import * as cors from 'cors' import * as helmet from 'helmet'; class App { public app: express.Express; constructor() { this.app = express(); this.initializeMiddlewares(); } private initializeMiddlewares() { this.app.use(helmet()); this.app.use(cors()); this.app.use(express.json({limit:"100mb"})); this.app.use(express.urlencoded({limit:"100mb", extended:true})); } } export default App;
server.ts
import App from './app'; const { app } = new App; app.listen(6382 ,() => { console.log( `服务器监听:6382`); });
我应该怎么做?
问题的出现原因是忘记在package.json中添加proxy。解决方法是在前端文件的package.json中添加proxy字段,并将其设置为后端的url。例如:"proxy": "http://localhost:6382/"
。然而,这样做后又出现了新的错误:"WebSocket connection to 'ws://localhost:3000/ws' failed: WebSocket is closed due to suspension.",且"Error: Network error"仍然持续出现。尝试将cors的两个属性origin和credentials设置为true后,前面的错误消失了,但网络错误仍然存在。