Create-React-App Proxy错误

时间:2018-01-23 04:32:40

标签: node.js reactjs create-react-app

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

我正在使用现有的API(用MVC C#web api编写)。

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

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

当我上线时,我将始终从不同的位置托管我的React应用程序到API。即我将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 C#本地主机服务器时,它工作正常,但是当在实时API服务器和开发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
)

有没有办法我可以逐步调试节点(表示我假设)服务器,这样我可以获得更多这个错误的细节?

我有小提琴打开,看起来没有任何尝试访问远程代理服务器。

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

任何帮助都将不胜感激。

3 个答案:

答案 0 :(得分:3)

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

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

但我很奇怪是#34;代理"好在我的Live网站上使用?或者它是一个开发工具,并且应该以不同的方式创建实时网站?

答案 1 :(得分:1)

我认为与此同时问题已经解决。

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

  

请记住,代理仅在开发中起作用(从npm start开始),并且您需要确保/ api / todos之类的URL指向生产中正确的事物。

在您的情况下,该API的主机不同。这应该通过适当的环境设置来解决。 (负载平衡器,代理或任何其他方式),然后可以保留相对路径。

否则,必须根据env变量或配置部署配置host:port部分,并重写为React App中的绝对路径。 see here

答案 2 :(得分:0)

您正在从本地主机向另一个域发出ajax请求。这被视为CORS要求。为了避免这种情况,您需要使用代理。由于代理是create react应用程序的一部分,因此您的浏览器假定它始终指向create-react-app,因此浏览器不知道代理存在。要解决此问题,请执行以下步骤:

在客户端目录中:

true

在client / src中创建setupProxy.js文件。无需将其导入任何地方。 create-react-app将寻找该目录

将代理添加到此文件。

npm i http-proxy-middleware --save

我们说要做一个代理,如果有人尝试访问我们的反应服务器上的/ api路由,则会自动将请求转发到localhost:8888。