Laravel+Inertia+React部署到Apache后Ziggy路由报错求助

问题说明 #

本地开发环境运行正常，部署到VPS的Apache服务器后，访问/login端点时触发错误：

Uncaught Error: Ziggy error: route '/login' is not in the route list

已修改.env文件中的APP_URL为所用域名，以下是项目相关信息：

项目依赖 #

"dependencies": {
    "@draft-js-plugins/static-toolbar": "^4.1.2",
    "@fortawesome/fontawesome-free": "5.15.3",
    "@popperjs/core": "2.9.1",
    "@tailwindcss/forms": "0.2.1",
    "autoprefixer": "10.2.5",
    "babel-plugin-macros": "^3.1.0",
    "chart.js": "^3.9.1",
    "draft-js": "^0.11.7",
    "gulp": "4.0.2",
    "gulp-append-prepend": "1.0.8",
    "js-file-download": "^0.4.12",
    "moment": "^2.29.1",
    "numeral": "^2.0.6",
    "postcss": "8.2.8",
    "quill-image-resize-module-react": "^3.0.0",
    "react": "17.0.1",
    "react-alert": "^7.0.3",
    "react-alert-template-basic": "^1.0.2",
    "react-chartjs-2": "^4.3.1",
    "react-dom": "17.0.1",
    "react-google-recaptcha": "^2.1.0",
    "react-js-pagination": "^3.0.3",
    "react-moment": "^1.1.1",
    "react-pluralize": "^1.6.3",
    "react-quill": "^2.0.0-beta.4",
    "react-recaptcha": "^2.3.10",
    "react-router": "5.2.0",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.3",
    "react-select": "^5.0.0",
    "slate": "^0.66.1",
    "slate-react": "^0.66.1"
}

登录相关路由代码 #

Auth::routes(['verify' => true]);

Route::middleware('guest')->group(function () {
    Route::get('/login', [AuthenticatedSessionController::class, 'create'])->name('login');
    Route::post('/login', [AuthenticatedSessionController::class, 'store'])->name('login');
});

React中调用登录端点的代码 #

const submit = (e) => {
    e.preventDefault();

    if(!data.CaptchaCode){
        alert('Invalid captcha!')
        return
    }

    post(route('/login'));

    recaptchaRef.current.reset();
}

Apache配置（/etc/apache2/sites-available/laravel-project.conf） #

<VirtualHost *:80>
   ServerName mydomain.com
   ServerAdmin webmaster@thedomain.com
   DocumentRoot /var/www/project-folder/public

   <Directory /var/www/project-folder>
       AllowOverride All
       Require all granted
   </Directory>
   ErrorLog ${APACHE_LOG_DIR}/error.log
   CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

解决方案 #

1. 安装Ziggy依赖并验证路由清单 #

你的项目依赖中缺少ziggy-js，这是Inertia集成Ziggy的必需包，执行安装：

npm install ziggy-js

运行以下命令确认/login路由已正确注册：

php artisan route:list

确保输出中存在名称为login的GET和POST路由。

2. 修正React路由调用方式 #

Ziggy的route()函数应使用路由名称而非路径，你的代码中错误使用了路径/login，改为路由名称login：

const submit = (e) => {
    e.preventDefault();

    if(!data.CaptchaCode){
        alert('Invalid captcha!')
        return
    }

    post(route('login'));

    recaptchaRef.current.reset();
}

3. 清除并重建服务器缓存 #

部署后需刷新Laravel缓存，确保配置和路由生效：

php artisan cache:clear
php artisan route:cache
php artisan config:cache

4. 修复Apache配置 #

• 启用重写模块：

  sudo a2enmod rewrite
  sudo systemctl restart apache2
  

• 修正Directory路径：将Apache配置中的<Directory>指向项目的public目录，而非根目录：

  <VirtualHost *:80>
     ServerName mydomain.com
     ServerAdmin webmaster@thedomain.com
     DocumentRoot /var/www/project-folder/public
  
     <Directory /var/www/project-folder/public>
         AllowOverride All
         Require all granted
     </Directory>
     ErrorLog ${APACHE_LOG_DIR}/error.log
     CustomLog ${APACHE_LOG_DIR}/access.log combined
  </VirtualHost>
  

• 确保public目录存在.htaccess：Laravel默认的.htaccess文件应位于/var/www/project-folder/public下，内容如下：

  <IfModule mod_rewrite.c>
      <IfModule mod_negotiation.c>
          Options -MultiViews -Indexes
      </IfModule>
  
      RewriteEngine On
  
      # Handle Authorization Header
      RewriteCond %{HTTP:Authorization} .
      RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
  
      # Redirect Trailing Slashes If Not A Folder...
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_URI} (.+)/$
      RewriteRule ^ %1 [L,R=301]
  
      # Send Requests To Front Controller...
      RewriteCond %{REQUEST_FILENAME} !-d
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^ index.php [L]
  </IfModule>
  

5. 确认Inertia共享Ziggy路由 #

检查app/Http/Middleware/HandleInertiaRequests.php，确保正确共享Ziggy路由信息给前端：

use Tightenco\Ziggy\Ziggy;

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'ziggy' => fn () => [
            ...(new Ziggy)->toArray(),
            'location' => $request->url(),
        ],
    ]);
}

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