Laravel Sanctum API与Vue客户端登录/注册404错误求助

核心问题分析 #

Postman能正常登录但前端报404，说明后端登录接口本身可用，问题出在前端请求路径配置、跨域代理或后端Sanctum的可信来源设置上。

解决方案 #

1. 修正前端Axios路径配置

• 本地开发时，确保Axios的baseURL设置为/api，同时在构建工具（Vite/Vue CLI）中配置代理，将/api请求转发到后端地址：
  • Vite配置（vite.config.js）：

    export default defineConfig({
      server: {
        proxy: {
          '/api': {
            target: 'https://envios.uvpfernandarivera.cloud',
            changeOrigin: true,
            secure: true
          }
        }
      }
    })
    

  • Vue CLI配置（vue.config.js）：

    module.exports = {
      devServer: {
        proxy: {
          '/api': {
            target: 'https://envios.uvpfernandarivera.cloud',
            changeOrigin: true
          }
        }
      }
    }
    

• 生产环境（Hostinger部署）：将Axios的baseURL设置为后端完整API路径（https://envios.uvpfernandarivera.cloud/api），或者如果前端与后端同域名，直接用/api即可。

2. 检查后端Sanctum配置

• 打开config/sanctum.php，在stateful数组中添加前端的可信域名：

  'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
      '%s%s',
      'localhost:5173,localhost:8080,envios.uvpfernandarivera.cloud', // 添加上你的本地端口和Hostinger域名
      env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
  ))),
  

• 确认后端已正确安装Sanctum，且routes/api.php中已注册Sanctum路由（默认会自动注册CSRF cookie接口）。

3. 验证后端CORS配置

• 打开config/cors.php，确保以下配置正确：

  'paths' => ['api/*', 'sanctum/csrf-cookie'],
  'allowed_origins' => ['*'], // 生产环境建议指定具体域名
  'allowed_methods' => ['*'],
  'allowed_headers' => ['*'],
  

4. Hostinger部署额外检查

• 部署前端后，确认Hostinger的站点配置中已设置正确的SPA重写规则（避免页面刷新404），规则示例：

  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
  

• 确保前端域名已添加到后端Sanctum的stateful列表，避免跨域时无法获取CSRF cookie。

调试步骤 #

• 在浏览器开发者工具的Network面板中，查看请求的完整URL，确认是否与后端实际接口路径匹配；
• 直接在浏览器地址栏访问https://envios.uvpfernandarivera.cloud/api/auth/sanctum/csrf-cookie，若返回404，说明后端该接口未正确注册，需重新安装或配置Sanctum。

内容的提问来源于stack exchange，提问作者Fernanda Rivera Galvan