为什么不会对代理请求做出反应

Question

我有一个在端口3001上运行的节点后端服务器，以及一个我尝试代理到该端口以获取数据的反应服务器。

现在，我已经在客户端文件夹的package.json文件中包含了“代理”行，告诉React将请求代理到端口3001。

然而，当我试图向服务器上的“test”路由发出一个简单的请求时，React代码不会代理这个请求。它将我发送到localhost:3000/test，而不是localhost:3001/test。

我不知道为什么会这样。为什么React代码不能正确代理我的请求？

Package.json（客户）

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

Package.json(节点)

{
  "name": "todo-api",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha tests/*.test.js  --exit",
    "test-watch": "export NODE_ENV=test || \"SET NODE_ENV=test\" && nodemon --exec \"npm test\"",
    "dev-server": "node server.js",
    "client": "npm run start --prefix client",
    "dev": "concurrently \"npm run dev-server\" \"npm run client\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "concurrently": "^3.6.0",
    "express": "^4.16.3",
    "jsonwebtoken": "^8.2.2",
    "lodash": "^4.17.1i0",
    "mongodb": "^3.1.0-beta4",
    "mongoose": "^5.1.1",
    "nodemailer": "^4.6.4",
    "twitter-validate": "^1.0.8",
    "validator": "^10.3.0"
  },
  "devDependencies": {
    "expect": "^1.20.2",
    "mocha": "^5.1.1",
    "nodemon": "^1.17.4",
    "rewire": "^4.0.1",
    "supertest": "^3.1.0"
  }
}

登录路线：

  login(e) {
    e.preventDefault();
    axios.get("/test")
    .then((res) => {
      console.log(res);
    })
    .catch((e) => {
      console.log(e);
    })
  }

而实际的index.js文件…

import React from "react";
import ReactDOM from "react-dom";
import "./styles/styles.scss";
import axios from "axios";

  class Login extends React.Component {

  showRoute(e){
    e.preventDefault();
    axios.get("/test")
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  render(){
    return (
      <div>
        <form onSubmit={this.login}>
          <legend>Login</legend>
          <label>Email:</label>
          <input type='text' name='email'/>
          <label>Password:</label>
          <input type='text' name='password'/>
          <button>Login</button>
        </form>
        <button onClick={this.showRoute}>Forgot Password?</button>
      </div>
    );
  }
}

ReactDOM.render(<Login />, document.getElementById("app"));

我得到的错误消息是:

GET http://localhost:3000/test 404 (Not Found)

Answer 1

问题在webpack-config中，请将webpack.dev.js设置为以下内容，然后重新启动dev服务器

模块导出 = 合并（常见， { 模式： “开发”， devServer： { 主机： 'localhost'， 端口： 3000， 打开： true， 历史记录回退： true， 代理： { '/api'： { 目标： 'http://localhost:3001'， 安全： 假 } }}， 开发工具： '内联源映射' }）;

如果您使用自己的React入门包，这个解决方案是可行的，在您的情况下，尝试找出“create-react-app”的webpack开发配置文件在哪里，并按照上面的代码进行更改。应该在“/node _ modules/react-scripts/config”路径下。

干杯！

Answer 2

你误解了代理。
代理不会改变你请求的url，它只是将请求从localhost:3000传输到localhost:3001。
程序不按你预期工作的问题可能是配置代理方式错误造成的。作为你发布的代码，代理可能被设置在server.js.