我的快速服务器的代理服务器在我的 React 应用程序中不起作用

Question

我是运行我的 React 应用程序在端口 3000 和 express 服务器在端口 4000，在同一台本地机器上。

在我的 React 应用程序中，使用 fetch api 我正在将我的注册表单数据发送到我在“/register”路由上的快速服务器-

const response = await fetch('/register' , {
        method: 'POST',
        headers : {
            "Content-Type" : "application/json"
        },
        body: JSON.stringify({
            name: username,
            email : useremail,
            phone : userphone,
            work : userwork,
            password: userpassword,
            cpassword : usercpassword
        })
    });

    const data = await response.json();

    if(data.status === 422 || !data){
        window.alert("Invalid registration");
        console.log("Invalid registration");
    }else{
        window.alert("registration successful");
        console.log("registration successful");

       //using useHistory hook
        history.push('/login');
    }

}

并且在我的 express 服务器中，我在“/register”路由中执行 post 方法并将表单数据存储在我的数据库中 -

router.post('/register' , (req,res)=>{
    
    const {name, email, phone, work, password, cpassword} = req.body;

    //we are checking if any of the inputs are empty or not
    if(!name || !email || !phone || !work || !password || !cpassword){
        return res.status(422).send('Please Fill All The Fields');
    }

    //we are observing if a user already registered or not by checking it's email
    User.findOne({email : email})
            .then((userExist) =>{
                    if(userExist){
                        return res.status(422).send('Email already exists');
                    }else if(password !== cpassword){
                        return res.status(422).send('Passwords are not matching');
                    }

                    //if the email dont exist , that means the user is new and we will store it's data in the DB
                    const user = new User({
                        name : name,
                        email : email,
                        phone : phone,
                        work : work,
                        password : password,
                        cpassword : cpassword,
            });

                //saved the stored data in the DB
            user.save()
            .then(()=>{
                res.status(201).send('User registered Successfully')
            })
            .catch((err)=>{
                res.status(500).send(err);
            })

    }).catch((err)=>{
        console.log(err);
    })
})

在我的 React 应用程序的 package.json 文件中，我将代理添加到 localhost:4000（在端口 4000 定义的快速服务器）-

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy" : "http://localhost:4000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^5.0.0-beta3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.1"
  }, 
  "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"
    ]
  }
}

在我的 firefox 控制台中，我遇到了这个错误 -

在网络选项卡下的浏览器中，我得到了这个 -

我面临 422 状态 error.I 过去 5 个小时一直在尝试解决这个问题，但是在阅读了很多解决方案和文章之后我也无法解决 mine.I 这个问题在 Whosebug 上检查了类似的问题，但他们的解决方案没有 worked.Basically ，我试图通过在 package.json 文件（react app ) ，但我不知道为什么 React 仍在考虑它自己的端口 3000 而不是服务器端口 4000.Please 帮我解决了这个 problem.Thanks 很多。

Answer 1

您可以通过 url localhost:3000/register 看到代理不工作。代理设置仅在开发模式下有效，也不确定。您有两个选择：

要么将整个 url 写入您的获取请求，要么制作一个获取拦截器以在每次 API 调用之前添加 'localhost:4000'。

P.S。第三种选择：如果您不想编写自定义获取拦截器，则可以使用 axios 而不是获取。 Axios 实例很容易做到：https://medium.datadriveninvestor.com/axios-instance-interceptors-682868f0de2d

我的快速服务器的代理服务器在我的 React 应用程序中不起作用

Proxy server to my express server is not working in my React app

javascript

express

reactjs

fetch-api

http-status-code-422