Laravel与React分离部署后，如何保留原有授权中间件功能？

当React和Laravel分离部署后，要保留firewall.country和firewall.ip中间件的校验，核心思路是让前端请求在到达React之前，先经过Laravel的中间件校验。以下是几种可行的实现方式：

方案一：Laravel作为反向代理处理前端请求 #

让用户访问的域名指向Laravel，Laravel先通过中间件校验请求，再将请求转发到React的部署地址。

1. 在Laravel中配置路由和反向代理逻辑：

use GuzzleHttp\Client;

Route::middleware(['firewall.country', 'firewall.ip'])->group(function () {
    Route::get('/{any}', function ($any) {
        // 从配置文件或环境变量读取React部署地址
        $reactBaseUrl = config('app.react_deployment_url');
        $targetUrl = rtrim($reactBaseUrl, '/') . '/' . $any;

        // 用Guzzle转发请求，保留原请求头
        $client = new Client();
        $response = $client->request('GET', $targetUrl, [
            'headers' => request()->headers->all(),
            'allow_redirects' => false,
        ]);

        // 将React的响应返回给用户
        return response($response->getBody(), $response->getStatusCode())
            ->withHeaders($response->getHeaders());
    })->where('any', '.*');
});

2. 在.env文件中添加React部署地址：

REACT_DEPLOYMENT_URL=https://your-react-app-domain.com

3. 在config/app.php中添加对应配置项：

'react_deployment_url' => env('REACT_DEPLOYMENT_URL'),

这种方式的优势是完全复用原有中间件逻辑，无需额外配置前端服务器，所有请求都经过Laravel的校验。

方案二：通过前端服务器（如Nginx）前置校验 #

如果React部署在独立的服务器（如Nginx、Vercel），可以在前端服务器上配置，让所有请求先触发Laravel的校验接口，通过后再放行到React。

1. Laravel端配置校验接口 #

添加一个仅用于校验的API接口，绑定需要的中间件：

Route::middleware(['firewall.country', 'firewall.ip'])->get('/api/check-access', function () {
    return response()->json(['status' => 'allowed'], 200);
});

2. Nginx端配置反向代理与校验 #

修改React部署服务器的Nginx配置，增加auth_request指令实现前置校验：

server {
    listen 80;
    server_name your-react-domain.com;

    location / {
        # 触发Laravel的校验接口
        auth_request /check-access;
        auth_request_set $auth_status $upstream_status;

        # 校验通过则转发到React应用
        if ($auth_status = 200) {
            proxy_pass http://your-react-app-internal-address;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }

        # 校验失败返回403
        error_page 403 /access-denied;
    }

    # 内部调用的校验路由，转发到Laravel接口
    location = /check-access {
        internal;
        proxy_pass https://your-laravel-domain.com/api/check-access;
        proxy_pass_request_body off;
        proxy_set_header Content-Length "";
        proxy_set_header X-Original-URI $request_uri;
        proxy_set_header X-Real-IP $remote_addr;
    }

    location = /access-denied {
        return 403 "Access Denied: Your location or IP is not allowed";
    }
}

这种方案适合前端和后端域名分离的场景，校验逻辑仍由Laravel维护，前端服务器仅负责触发校验和转发。

方案三：前端初始化时主动校验（仅作辅助） #

在React应用初始化时，主动调用Laravel的校验接口，校验通过后再渲染页面。但此方案仅能作为辅助，无法完全阻止绕过前端直接访问React的请求，必须配合服务器端校验使用。

示例代码（React的根组件）：

import { useEffect, useState } from 'react';

function App() {
  const [accessAllowed, setAccessAllowed] = useState(null);

  useEffect(() => {
    // 调用Laravel校验接口
    fetch('https://your-laravel-domain.com/api/check-access', {
      credentials: 'include' // 若需要会话保持则添加
    })
    .then(res => {
      setAccessAllowed(res.ok);
    })
    .catch(() => {
      setAccessAllowed(false);
    });
  }, []);

  if (accessAllowed === null) {
    return <div>Checking access...</div>;
  }

  if (!accessAllowed) {
    return <div className="access-denied">Access Denied</div>;
  }

  // 校验通过，渲染应用内容
  return (
    <div className="app-container">
      {/* 你的React应用组件 */}
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Abeel