为啥不响应代理请求

Posted 2023-02-22

【中文标题】为啥不响应代理请求

【英文标题】：Why Won't React Proxy Requests为什么不响应代理请求

【发布时间】：2018-12-30 11:15:43

【问题描述】：

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

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

但是，当我尝试向服务器上的“测试”路由发出简单请求时，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)

【问题讨论】：

对this question and answer on stack overflow有帮助

【参考方案1】：

您误解了代理。 代理不会更改您请求的 url，它只是将请求从 localhost:3000 传输到 localhost:3001。 程序无法按预期运行的问题可能是由于配置代理方式错误造成的。正如您发布的代码，代理可能在 server.js 中设置。

【讨论】：

好的。我还是不明白。我想做的是在我的 index.js 文件中编写相对路由，该文件在 localhost:3000 上运行，并将这些 GET/POST/DELETE 请求代理到 localhost:3001（这是我的后端节点服务器）。我该如何配置？根据我在网上阅读的教程，您可以通过在我的 React 项目中的 package.json 文件中添加 "proxy": "localhost:3001" 行来做到这一点。但是，这是行不通的。有什么建议吗？

【参考方案2】：

问题出在 webpack 配置中，将 webpack.dev.js 设置为波纹管并重启开发服务器

module.exports = merge(common, mode: 'development', devServer: host: 'localhost', port: 3000, open: true, historyApiFallback: true, proxy: '/api': target: 'http://localhost:3001', secure: false , devtool: 'inline-source-maps' );

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

干杯！