react脚手架项目,配置setupProxy.js代理,页面报错404

react脚手架项目,配置setupProxy.js代理,页面报错404。百度的方法都找过一遍了,全部都试过了,仍然无法解决,一直报错404。
新手出村,求指点!下面是代码片段

App.jsx内容:

import React, { Component } from 'react';
import axios from 'axios'
import './App.css';

class App extends Component {
    getStudentData = ()=>{
            axios.get('http://localhost:3000/api/students').then(
            response=>{console.log('成功了',response.data);},
            error=>{console.log('失败了',error);}
        )

    }
    render() {
        return (
            <div >
                <button onClick={this.getStudentData}>点我获取学生数据</button>
                
            </div>
        );
      }
}

export default App;

/src/setupProxy.js的内容:

const {createProxyMiddleware}=require('http-proxy-middleware')

module.exports=function (app){
    console.log(app)
    app.use(createProxyMiddleware('/api',{
            target:"http://localhost:5000",
            changeOrigin:true,
            pathRewrite:{'^/api':''}
        })

    )
}

/src/setupProxy.js也试过下面这种写法,页面也是报404:

// const proxy=require('http-proxy-middleware')
//
// module.exports=function (app){
//     console.log(app)
//     app.use(proxy('/api',{
//         target:"http://localhost:5000",
//         changeOrigin:true,
//         pathRewrite:{'^/api':''}
//         })
//
//     )
// }

node的版本是:v14.17.5:

C:\Users\Administrator>node -v
[0x7FF9581CE0A4] ANOMALY: use of REX.w is meaningless (default operand size is 64)
v14.17.5

package.json中的其他依赖版本

{
  "name": "mytest",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.21.4",
    "create-react-app": "^4.0.3",
    "express": "^4.17.1",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-axios": "^2.0.5",
    "react-dom": "^17.0.2",
    "react-scripts": "^4.0.3",
    "react-uuid": "^1.0.2",
    "http-proxy-middleware": "0.17.3"
  },

npm start后的报错:
image.png

http://localhost:5000/students
这个地址是确定可以成功访问并且有一串json返回数据的。
把代理直接写到package.json中的话,是可以成功代理的。
"proxy":"http://localhost:5000"
只是用setupProxy.js来代理就会报错404.不明白为什么

阅读 5.2k
1 个回答
新手上路,请多包涵

问题已解决,用vscode可以正常运行。
webstrom上就会报错,猜测是webstrom导致程序不跑setupProxy.js文件导致。具体原因不明。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题