React通过URL向Laravel传数据时出现‘页面未找到’错误的排查

问题场景 #

在React中通过拼接URL传递包含链接的参数到Laravel后端，仅传递game_id和decx时路由正常工作，但添加linkR和linkT两个链接参数后，Laravel返回“页面未找到”错误。

React端代码：

<button id="app" onClick={() => handleApproveClick(item.linkT, item.linkR, item.game_id, item.decx)}>Approve</button>
function handleApproveClick(linkT, linkR, gameId, decx) {
    const data = {
        linkT: linkT,
        linkR: linkR,
        gameId: gameId,
        decx: decx
    };
    window.location.href = `http://127.0.0.1:8000/approve/${data.gameId}/${encodeURIComponent(data.linkR)}/${data.decx}/${encodeURIComponent(data.linkT)}`;
}

Laravel端原路由代码：

Route::get('/approve/{game_id}/{linkR}/{decx}/{linkt}', function($game_id, $decx, $linkt, $linkR) {
    dd($linkt.$linkR.$game_id.$decx);
});

问题原因 #

1. 路由参数顺序不匹配：React拼接的URL参数顺序是gameId → linkR → decx → linkT，但Laravel路由闭包的参数顺序是$game_id, $decx, $linkt, $linkR，参数顺序完全错位，导致路由解析失败。
2. 链接参数的特殊字符限制：即使通过encodeURIComponent编码了链接，Laravel默认的路由参数{param}只会匹配到下一个/为止，编码后的链接含%2F（对应原链接的/），会被Web服务器或Laravel路由解析为路径分隔符，导致路由匹配中断。

解决方案 #

1. 修正路由参数顺序 #

确保Laravel路由闭包的参数顺序和URL中的参数顺序完全对应：

Route::get('/approve/{game_id}/{linkR}/{decx}/{linkt}', function($game_id, $linkR, $decx, $linkt) {
    // 解码编码后的链接参数
    $linkR = urldecode($linkR);
    $linkt = urldecode($linkt);
    dd($linkt.$linkR.$game_id.$decx);
});

2. 添加路由参数正则约束 #

给linkR和linkt参数添加.*正则约束，允许匹配任意字符（包括编码后的%2F）：

Route::get('/approve/{game_id}/{linkR}/{decx}/{linkt}', function($game_id, $linkR, $decx, $linkt) {
    $linkR = urldecode($linkR);
    $linkt = urldecode($linkt);
    dd($linkt.$linkR.$game_id.$decx);
})->where(['linkR' => '.*', 'linkt' => '.*']);

3. 配置Web服务器允许编码斜杠 #

• Apache：在项目根目录的.htaccess文件中添加以下配置：

  AllowEncodedSlashes On
  

• Nginx：在站点配置的location /块中添加：

  allow_encoded_slashes on;
  

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