php - create-react-app 代理请求到 php 后端

Question

我通过 $ php -S localhost:8888 -t public 运行 Lumen (5.3) API，当我通过 postman 访问任何端点时，它可以正常工作。但是，例如，当我尝试 curl localhost:8888/v1/auth/login 时，出现以下错误:

curl: (7) Failed to connect to localhost port 8888: Connection refused

在问这个问题之前我做了一些探索，一些用户说我可能需要为我的一些路由启用 CORS。所以我继续安装 https://github.com/barryvdh/laravel-cors#lumen并将其应用于所有路线。

但是，我仍然无法从终端窗口访问任何端点。

最终目标

最终，目标是将来自 React 应用程序的请求代理到 lumen 后端，但我一直收到连接被拒绝的请求。

Proxy error: Could not proxy request /v1/auth/login from localhost:3000 to http://localhost:8888/. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

有没有可能是我在 lumen 中错误配置了 handle CORS 中间件？

更新

我设法让我的 React 应用程序通过在请求中注入(inject)完整路径来向我的流明 API 发出请求。例如，路径现在是 http://localhost:8888/v1/auth/login，而不是 /v1/auth/login。我设法通过将 mode: 'no-cors' 添加到我的 fetch 来让它工作:

function login(userData, onError, cb) {
  return fetch('http://localhost:8888/v1/auth/login', {
    mode: 'no-cors',
    method: 'post',
    body: JSON.stringify(userData),
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
  }).then(checkStatus)
    .then(parseJSON)
    .then(cb)
    .catch(onError);
}

无模式:no-cors

理想情况下，我只想返回 fetch('/v1/auth/login', { 并在没有模式的情况下代理请求:no-cors 但这似乎不起作用。任何想法为什么？

另外，curl 的问题仍然存在。

Answer 1

事实证明，通过使用 $ php -S localhost:8888 -t public 启动我的 php 后端是导致问题首当其冲的原因。在深入研究 create-react-app 问题后，我发现一位用户在使用 php 后端 ( https://github.com/facebookincubator/create-react-app/issues/800 ) 时遇到了类似的问题。

解决方案是像这样启动服务器:$ php -S 0.0.0.0:8888 -t public 这将允许 create-react-app 正确代理对 php 服务器的请求。这也让我可以curl localhost:8888

此外，我需要在我的 php.ini 文件中取消注释 always_populate_raw_post_data = -1(Warning about `$HTTP_RAW_POST_DATA` being deprecated)

我的设置如下:

package.json

{
  "name": "client",
  "version": "0.4.2",
  "private": true,
  "devDependencies": {
    "enzyme": "^2.6.0",
    "react-addons-test-utils": "^15.4.1",
    "react-scripts": "0.7.0"
  },
  "dependencies": {
    "isomorphic-fetch": "^2.2.1",
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router-dom": "^4.2.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:8888/"
}

从客户端获取

function login(userData, onError, cb) {
  return fetch('/v1/auth/login', { // <-- this works correctly now
    method: 'post',
    body: JSON.stringify(userData),
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
  }).then(checkStatus)
    .then(parseJSON)
    .then(cb)
    .catch(onError);
}

希望这对遇到类似问题的其他人有所帮助。