Create-React-App Proxy错误

Question

我正在创建一个create-react-app。

我正在使用一个现有的应用程序接口(它是用MVC C# web API编写的)。

我希望React应用程序使用的API位于：https://api.myserver.com.au

我正在从http://localhost运行React的开发版本

当我上线时，我将总是从API的不同位置托管我的React应用程序。我会把它放在https://my.cool.app上，API也会放在https://api.myserver.com.au上。

我的package.json如下：

{
  "name": "hbi.contractor",
  "version": "0.1.0",
  "private": true,
  "proxy": {
    "/api/*": {
      "target": "https://api.myserver.com.au"
    }
  },
  "dependencies": {
    "axios": "^0.17.1",
    "jquery": "^3.2.1",
    "materialize-css": "^0.100.2",
    "nodemon": "^1.14.11",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-form": "^2.16.1",
    "react-live-clock": "^2.0.2",
    "react-load-script": "0.0.6",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-materialize": "^1.1.2"
  }
}

当我将代理设置为开发MVC本地主机服务器时，它工作得很好，但是当在live C#服务器和开发React上时，我尝试并浏览到：

http://localhost:3000/api/Acccount/GetUser

回应是：

Proxy error: Could not proxy request /api/Acccount/GetUser from localhost:3000 to https://api.myserver.com.au (ECONNRESET).

在终端中，它与这条消息非常相似：

Proxy error: Could not proxy request /api/Acccount/GetUser from localhost:3000 to https://api.myserver.com.au.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNRESET).

[HPM] Error occurred while trying to proxy request /api/Acccount/GetUser from localhost:3000 to https://api.myserver.com.au (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors
)

有没有一种方法可以逐步调试Node (我假设是express)服务器，这样我就可以获得这个错误的更多细节？

我打开了fiddler，看起来没有任何访问远程代理服务器的尝试。

考虑到我计划在实时版本中保持这种方式，代理功能是正确的功能吗？

任何帮助都将不胜感激。

Answer 1

我已经通过更新我的package.json文件解决了这个问题：

  "proxy": {
    "/api/*": {
      "target": "https://api.hbiaustralia.com.au",
      "changeOrigin": true
    }
  },

但是我想知道在我的Live站点上使用“代理”是不是很好？或者它是一个开发工具，而实时站点应该以不同的方式创建？

Answer 2

我认为在此期间问题已经解决了。

是的，代理是一个开发工具，你的react部分通常应该是静态内容。See proxy server documentation:

请记住，代理只在开发中有效(使用npm start)，您需要确保像/api/todos这样的URL指向生产环境中的正确内容。

在您的例子中，api有一个不同的主机。这应该通过适当的环境设置来解决。(负载均衡器、代理或其他)，然后您可以保留相对路径。

否则，host:port部分必须按照env变量或配置部署进行配置，并重写为React App中的绝对路径。see here

Answer 3

您正在从本地主机向另一个域发出ajax请求。这将计入CORS请求。要避免这一点，您需要使用代理。由于proxy是创建react应用程序的一部分，因此您的浏览器假设它总是指向create-react-app，浏览器不知道那里有proxy。要解决此问题，请执行以下步骤：

在客户端目录中：

npm i http-proxy-middleware --save

在客户端/src中创建setupProxy.js文件。不需要在任何地方导入。create-react-app将查找此目录

将代理添加到此文件中。

const proxy=require("http-proxy-middleware")
module.exports=function(app){
    app.use(proxy(['/api'],{target:"http://localhost:8888"}))}

我们的意思是创建一个代理，如果任何人试图访问我们react服务器上的路由/api，就会自动将请求转发到localhost:8888。