对php后端的create-react-app代理请求

时间:2017-08-27 06:46:51

标签: php laravel reactjs curl lumen

我通过$ php -S localhost:8888 -t public运行Lumen(5.3)API,当我通过邮递员点击任何端点时,它可以正常工作。但是,当我尝试卷曲localhost:8888 / v1 / auth / login时,我收到以下错误:

  

卷曲:(7)无法连接到localhost端口8888:拒绝连接

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

但是,我仍然无法从终端窗口点击任何端点。

最终目标

最终,目标是将响应应用程序的请求代理到流明后端,但我一直拒绝连接。

console errors

network tab

  

代理错误:无法将请求/ v1 / auth / login从localhost:3000代理到http://localhost:8888/。   有关详细信息,请参阅https://nodejs.org/api/errors.html#errors_common_system_errors(ECONNREFUSED)。

我是否有可能错误配置内腔中的句柄CORS中间件?

更新

我设法通过在请求中注入完整路径来响应应用程序向我的流明API发出请求。例如,路径现在是/v1/auth/login,而不是http://localhost:8888/v1/auth/login。我设法通过将mode: 'no-cors'添加到我的提取中来实现此目的:

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

Without mode: no-cors

理想情况下,我只想return fetch('/v1/auth/login', {并在没有模式的情况下代理请求:no-cors但这似乎不起作用。知道为什么吗?

此外,卷曲问题仍然存在。

1 个答案:

答案 0 :(得分:4)

事实证明,通过使用$ 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

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

我的设置如下:

<强>的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);
}

希望这可以帮助其他遇到类似问题的人。