Nginx配置Nuxt+Laravel API HTTPS遇403及网关超时问题求助
解决方案:修正Nginx配置并解决权限/服务问题
我来帮你梳理下当前配置的问题,并给出修正后的完整配置,同时解决你遇到的403和网关超时问题。
首先看核心需求回顾
你需要实现:
website.com/www.website.com:反向代理到Nuxt服务(3000端口),通过HTTPS访问api.website.com:直接运行Laravel后台(PHP-FPM),同时api.website.com/api路径代理到8000端口的API服务,供Nuxt调用
修正后的完整Nginx配置
1. API与Laravel后台配置(api.website.com)
server { listen 80; server_name api.website.com; return 301 https://$host$request_uri; } server { listen 443 ssl; server_name api.website.com; root /var/www/api/public; index index.php index.html index.htm; # 处理Laravel后台的页面请求 location / { try_files $uri $uri/ /index.php?$query_string; } # 代理API请求到8000端口 location /api { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://127.0.0.1:8000; proxy_read_timeout 90; proxy_redirect off; # 取消不必要的重定向规则,避免冲突 } # PHP-FPM处理逻辑,确保脚本路径正确 location ~ \.php$ { include snippets/fastcgi-php.conf; fastcgi_pass unix:/run/php/php7.4-fpm.sock; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; } # 禁止访问隐藏的.ht文件 location ~ /\.ht { deny all; } # SSL证书配置保持不变 ssl_certificate /etc/letsencrypt/live/api.website.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/api.website.com/privkey.pem; include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; }
2. Nuxt前端网站配置(website.com/www.website.com)
server { listen 80; server_name website.com www.website.com; return 301 https://$host$request_uri; } server { listen 443 ssl; server_name website.com www.website.com; # 反向代理到Nuxt服务 location / { proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_pass http://127.0.0.1:3000; # 延长超时时间,避免网关超时 proxy_read_timeout 90; proxy_connect_timeout 30; proxy_send_timeout 90; proxy_redirect off; } # SSL证书配置保持不变 ssl_certificate /etc/letsencrypt/live/www.website.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/www.website.com/privkey.pem; include /etc/letsencrypt/options-ssl-nginx.conf; ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; }
针对你遇到的问题的具体解决步骤
问题1:Laravel后台访问出现403错误
这大概率是目录权限或Nginx用户权限问题:
- 修复Laravel项目目录权限,确保Nginx运行用户(通常是
www-data)能读取文件:sudo chown -R www-data:www-data /var/www/api sudo chmod -R 755 /var/www/api # 给存储和缓存目录额外写权限 sudo chmod -R 775 /var/www/api/storage /var/www/api/bootstrap/cache - 确认
/var/www/api/public目录下存在index.php文件,且是Laravel的入口文件。 - 如果你的服务器启用了SELinux(比如CentOS/RHEL系统),需要设置文件上下文:
sudo chcon -R -t httpd_sys_content_t /var/www/api/public
问题2:Nuxt网站出现网关超时
这说明Nginx无法连接到3000端口的Nuxt服务,按以下步骤排查:
- 检查Nuxt服务是否在运行:
# 查看3000端口是否被占用 lsof -i :3000 # 或查看Nuxt进程 ps aux | grep nuxt - 确保Nuxt启动时监听的是
0.0.0.0:3000或127.0.0.1:3000,而不是仅监听IPv6地址(::1)。你可以在Nuxt的nuxt.config.js中添加:export default { server: { host: '0.0.0.0', port: 3000 } } - 检查防火墙是否拦截本地请求:
sudo ufw allow in from 127.0.0.1 to any port 3000
验证配置生效
- 重启Nginx服务:
sudo systemctl restart nginx - 测试Laravel后台:执行
curl https://api.website.com,如果返回Laravel页面内容则正常。 - 测试API代理:执行
curl https://api.website.com/api/xxx(替换成你实际的API接口),检查是否返回正确响应。 - 测试Nuxt网站:访问
https://website.com,确认页面加载正常,且前端能成功调用https://api.website.com/api接口。
内容的提问来源于stack exchange,提问作者Anonymous
相关产品推荐
相关产品推荐

