Laravel10+Vue3 Vite本地正常生产环境API请求返回401问题

技术栈 #

• Laravel 10
• Vue 3 + Vite
• PHP 8.2
• Sanctum API Token认证（非SPA模式）

核心代码片段 #

登录接口代码（Laravel） #

public function login(Request $request)
{
    $credentials = [
        'email' => $request->email,
        'password' => $request->password
    ];

    if (Auth::attempt($credentials)) {
        $token = Auth::user()->createToken('authToken')->plainTextToken;

        return response()->json([
            'success' => true,
            'data' => [
                'user' => Auth::user(),
                'token' => $token
            ]
        ], 200);
    }

    return response()->json([
        'success' => false,
        'message' => 'Invalid credentials'
    ], 401);
}

Sanctum配置（config/sanctum.php） #

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s',
    'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1,example.test,paneldecontrolem.cl',
    Sanctum::currentApplicationUrlWithPort()
))),

前端接口调用代码（Vue） #

async getData() {
    this.loading = true;
    this.isLoading = true;
    const token = localStorage.getItem("token");

    try {
        const response = await axios.get(
            "https://paneldecontrolem.cl/api/alliance/",
            {
                headers: {
                    Authorization: `Bearer ${token}`,
                    accept: "application/json",
                },
            }
        );

        this.posts = response.data.data;
        this.loading = false;
        this.isLoading = false;
    } catch (error) {
        console.error("Error al obtener la lista de alianzas:", error);
    }
},

问题现象 #

本地环境运行完全正常，能正常获取Token并调用接口；部署到生产环境后，登录成功可获取Token，但调用接口时持续返回401状态码。

可能的原因及解决办法 #

• Token传递校验：

  • 打开浏览器DevTools的Application面板，确认localStorage中的token值完整且正确，无多余空格或截断。
  • 查看Network面板中请求的Request Headers，确认Authorization字段确实存在，格式为Bearer xxxxxx（注意Bearer后有且仅有一个空格）。

• Sanctum与CORS配置检查：

  • 检查生产环境.env文件中的SANCTUM_STATEFUL_DOMAINS，确保包含前端域名（仅域名，不要带http/https，如paneldecontrolem.cl）；若未设置该变量，确认config/sanctum.php中硬编码的域名是否正确。
  • 核对config/cors.php：确保allowed_origins包含前端完整域名，allowed_methods设为['*']或涵盖所需HTTP方法，allowed_headers包含Authorization和Accept。
  • 确认生产环境APP_URL配置正确，Sanctum依赖该值生成域相关信息。

• 路由中间件校验：

  • 检查接口路由是否正确应用了auth:sanctum中间件，例如：

    Route::middleware('auth:sanctum')->group(function () {
        Route::get('/api/alliance/', [AllianceController::class, 'index']);
    });
    

• 服务器配置排查：

  • 若使用Nginx，检查配置文件是否存在proxy_set_header Authorization "";这类会清空Authorization头的代码，如有则删除。
  • 检查服务器安全模块（如ModSecurity）或防火墙是否拦截了Authorization请求头，必要时添加放行规则。
  • 确认PHP配置中allow_url_fopen已开启，避免影响Sanctum的内部请求处理。

• Token有效性日志排查：

  • 在auth:sanctum中间件前添加临时日志，输出请求头和认证状态：

    Log::info('Authorization Header:', ['header' => request()->header('Authorization')]);
    Log::info('Auth Check Result:', ['result' => Auth::check()]);
    

    通过日志判断Token是否被正确接收，以及认证过程是否出现异常。

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