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

Posted

技术标签:

【中文标题】对 php 后端的 create-react-app 代理请求【英文标题】:create-react-app proxy requests to php backend 【发布时间】:2018-02-04 17:48:15 【问题描述】:

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

curl: (7) 无法连接到 localhost 8888 端口:连接被拒绝

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

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

最终目标

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

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

是否有可能我在流明中错误配置了句柄 CORS 中间件?

更新

我通过在请求中注入完整路径,设法让我的 react 应用程序向我的 lumen API 发出请求。例如,路径现在不是/v1/auth/login,而是http://localhost:8888/v1/auth/login。我设法通过在我的 fetch 中添加 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

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

此外,curl 的问题仍然存在。

【问题讨论】:

如果在未启用 CORS 时 Lumen 拒绝请求,那就坏了——因为启用 CORS 对服务器系统的唯一影响就是让它发送 Access-Control-Allow-Origin响应头和其他 Access-Control-* 头。未启用 CORS 不应导致服务器拒绝请求;相反,就 CORS 而言,唯一发生阻塞的地方是客户端,浏览器将阻止您的前端代码访问对跨域请求的响应,除非响应具有 Access-Control-Allow-Origin 标头 mode: 'no-cors'而言,有两种效果。第一个是,它会阻止您的前端代码将任何“自定义”标头添加到请求中——其中Content-Type: application/json 被定义为该类别中的标头之一。第二个效果是,它告诉浏览器在任何情况下都阻止您的前端代码访问响应。因此,在问题中的代码中,效果是:该请求在没有 Content-Type: application/json 标头的情况下发送到服务器,当服务器发回响应时,浏览器会阻止该代码访问它。 我不知道是什么导致了您在 curl 中看到的问题,但如果您的目标是成功获得对该端点的 POST 请求的响应,并且只有在您使用 mode: 'no-cors' 时才有效,那似乎指示浏览器在 POST 之前发送的 CORS 预检 OPTIONS 请求(由于 Content-Type: application/json 标头)失败,或者服务器未发送 Access-Control-Allow-Origin 响应标头。请注意,即使服务器上没有正确启用 CORS,该 POST 请求仍然可以成功——只是浏览器不会让您的代码访问响应。 无论如何,如果您可以使用***.com/posts/45902370/edit 来编辑/更新您的问题,以在您尝试不使用mode: 'no-cors' 的请求时显示浏览器正在记录到 devtools 控制台的确切错误消息,这将有所帮助。如果您可以打开浏览器开发工具的“网络”窗格并重新加载并检查浏览器正在发送的请求(包括所有请求标头)以及服务器正在发送的响应,这也会有所帮助。在响应的情况下,除了查看响应标头之外,还有助于了解响应的确切 HTTP 状态代码 【参考方案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

此外,我需要根据 (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);

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

【讨论】:

我使用了不同的服务器,但遇到了类似的错误,并以0.0.0.0 开头,也为我修复了它。很好的发现!

以上是关于对 php 后端的 create-react-app 代理请求的主要内容,如果未能解决你的问题,请参考以下文章

php Laravel Passport跳过对可信客户端的授权

单独的 Angular 2 客户端和 Laravel PHP 后端的推送通知

后端的 Laravel VueJS 路由器

ajax对数据删除查看详情功能

php入门

Mac下快速对H5鱼虾蟹棋牌搭建PHP开发环境