本地开发环境Laravel+Vue项目CORS重定向问题求助

问题复盘 #

Laravel服务运行在127.0.0.1:8000，Vue前端在localhost:8080，已配置Vue devServer代理/api和/sanctum指向Laravel。流程是先请求sanctum/csrf-cookie获取XSRF token，再调用api/login接口时，出现302重定向到127.0.0.1:8000，同时触发CORS错误：

Access to XMLHttpRequest at 'http://127.0.0.1:8000/' (redirected from 'http://localhost:8080/api/login') from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

直接请求127.0.0.1:8000/api/login仅报CSRF不匹配，无CORS问题；路由配置为Route::post('login', '\App\Http\Controllers\Auth\LoginController@apiLogin');。

核心解决步骤 #

1. 修正Laravel CORS配置 #

编辑config/cors.php，确保以下配置正确：

return [
    'paths' => ['api/*', 'sanctum/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:8080'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true, // 必须开启，因为要携带会话cookie
];

修改后执行命令清除配置缓存：php artisan config:clear

2. 配置Sanctum信任前端域名 #

编辑config/sanctum.php，在stateful数组中添加前端域名：

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s',
    'localhost,localhost:8080,127.0.0.1,127.0.0.1:8000,::1',
    env('APP_URL') ? ','.parse_url(env('APP_URL'), PHP_URL_HOST) : ''
))),

或直接在.env文件中设置：

SANCTUM_STATEFUL_DOMAINS=localhost:8080,127.0.0.1:8000

3. 确保Vue代理及Axios配置正确 #

Vue项目根目录的vue.config.js（无则新建）配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true, // 关键，模拟请求来自目标域名
        ws: true
      },
      '/sanctum': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
        ws: true
      }
    }
  }
}

Axios全局配置（建议在main.js中设置）：

import axios from 'axios'

axios.defaults.baseURL = '/api'
axios.defaults.withCredentials = true // 必须开启，携带cookie

// axios自动处理XSRF，以下两行可按需保留
axios.defaults.xsrfCookieName = 'XSRF-TOKEN'
axios.defaults.xsrfHeaderName = 'X-XSRF-TOKEN'

4. 修复LoginController的API响应逻辑 #

这是导致302重定向的核心原因：默认Laravel登录控制器会在验证失败时返回重定向，API接口必须返回JSON响应。修改apiLogin方法：

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

public function apiLogin(Request $request)
{
    // 验证请求参数
    $validated = $request->validate([
        'email' => 'required|email',
        'password' => 'required|string'
    ]);

    // 尝试登录
    if (!Auth::attempt($validated)) {
        return response()->json([
            'message' => '邮箱或密码错误'
        ], 401);
    }

    // 登录成功，返回用户信息或token
    return response()->json([
        'user' => Auth::user(),
        // 如需返回Sanctum token，可添加：
        // 'token' => $request->user()->createToken('api-token')->plainTextToken
    ]);
}

确保方法中未使用redirect()或继承带重定向逻辑的父类方法。

5. 清除浏览器缓存与Cookie #

每次修改配置后，清空浏览器缓存并删除相关Cookie，避免旧缓存干扰请求。

额外验证点 #

• 确认请求sanctum/csrf-cookie后，浏览器中存在XSRF-TOKEN和laravel_session Cookie；
• 检查api/login请求头中是否携带X-XSRF-TOKEN字段；
• 确保API路由在routes/api.php中，使用api中间件组（Sanctum依赖此中间件处理CSRF验证）。

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