本文档旨在解决 Nuxt.js 前端应用与 Laravel API 在同一服务器上部署时，由于 Nginx 配置不当导致 API 路径重复的问题。通过修改 Laravel 的 RouteServiceProvider 文件，移除 API 路由的前缀，从而避免 Nginx 将 /api 路径重复添加，确保 API 请求能够正确路由到 Laravel 应用。
问题描述
在使用 Nuxt.js 构建前端应用，并使用 Laravel 构建 API 后端时，将两者部署在同一服务器上，并使用 Nginx 进行反向代理。可能会遇到 Nginx 将 API 路径重复添加的问题，例如，期望的 API 请求路径是 http://example.com/api/login/google，但实际访问时需要使用 http://example.com/api/api/login/google 才能正常工作。
原因分析
该问题通常是由于 Laravel 的 RouteServiceProvider 文件中定义了 API 路由的前缀，而 Nginx 的配置也包含了 /api 路径的定义，导致路径重复。
解决方案
要解决此问题，需要修改 Laravel 的 RouteServiceProvider 文件，移除 API 路由的前缀。
立即学习“前端免费学习笔记（深入）”；
步骤 1: 修改 RouteServiceProvider.php
打开 app/Providers/RouteServiceProvider.php 文件。找到 boot 方法，该方法中定义了 API 路由的配置。
步骤 2: 移除 API 路由前缀
找到以下代码块：
Route::prefix('api')
->middleware('api')
->namespace($this->namespace)
->group(base_path('routes/api.php'));将其修改为：
Sylius开源电子商务平台是一个开源的 PHP 电子商务网站框架，基于 Symfony 和 Doctrine 构建，为用户量身定制解决方案。可管理任意复杂的产品和分类，每个产品可以设置不同的税率，支持多种配送方法，集成 Omnipay 在线支付。功能特点：前后端分离Sylius 带有一个强大的 REST API，可以自定义并与您选择的前端或您的微服务架构很好地配合使用。如果您是 Symfony
Route::middleware('api')
->namespace($this->namespace)
->group(base_path('routes/api.php'));移除了 Route::prefix('api')，从而不再为 API 路由添加前缀。
步骤 3: 示例代码
修改后的 RouteServiceProvider.php 文件的 boot 方法可能如下所示：
public function boot()
{
$this->configureRateLimiting();
$this->routes(function () {
Route::middleware('api')
->namespace($this->namespace)
->group(base_path('routes/api.php'));
Route::middleware('web')
->namespace($this->namespace)
->group(base_path('routes/web.php'));
});
}步骤 4: 清除缓存
修改完成后，清除 Laravel 的路由缓存和配置缓存，以确保修改生效。
php artisan route:clear php artisan config:clear php artisan cache:clear php artisan view:clear
Nginx 配置 (可选)
如果修改 RouteServiceProvider.php 后问题仍然存在，检查 Nginx 配置文件。 确保 location /api 配置正确地将请求代理到 Laravel 应用的 public 目录。以下是一个示例配置：
server {
listen 80;
server_name example.com;
root /var/www/html/nuxt-apt-front/dist;
index index.html index.htm index.nginx-debian.html;
location / {
try_files $uri $uri/ /index.html; # Nuxt.js 处理前端路由
}
location /api {
alias /var/www/html/laravel-api/public;
try_files $uri $uri/ /api/index.php?$query_string;
location ~ \.php$ {
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.4-fpm.sock;
fastcgi_index index.php;
include fastcgi_params;
fastcgi_param SCRIPT_FILENAME $request_filename;
}
}
}注意事项:
- /var/www/html/nuxt-apt-front/dist 是 Nuxt.js 构建后的静态资源目录。
- /var/www/html/laravel-api/public 是 Laravel 应用的 public 目录。
- fastcgi_pass 的路径需要根据实际的 PHP-FPM 配置进行调整。
- 确保 PHP-FPM 正常运行。
总结
通过移除 Laravel 的 RouteServiceProvider 文件中 API 路由的前缀，可以解决 Nginx 配置中 API 路径重复的问题。同时，检查 Nginx 配置文件，确保其正确地将 API 请求代理到 Laravel 应用。 按照以上步骤，即可成功部署 Nuxt.js 前端应用和 Laravel API，并确保 API 请求能够正确路由。
