Nuxt.js对接Laravel Sanctum生产环境出现CORS跨域错误如何解决？

错误原因 #

• Laravel端config/cors.php仅开启了凭证支持，未配置允许跨域的前端域名，OPTIONS预检请求无法拿到合法的响应头
• 前端Nuxt配置了axios代理，但Register.vue内直接写了完整的后端API地址，完全没有走本地代理规则，代理配置未生效
• 生产环境如果用Nginx部署Laravel，OPTIONS请求大概率被Nginx直接拦截，没有走到Laravel的CORS中间件处理
• 修改Laravel配置后未清理生产环境缓存，新配置没有生效

遗漏的配置项 #

• Laravel端config/cors.php的allowed_origins、paths字段配置
• 生产环境Laravel配置、路由缓存清理规则
• 前端请求路径适配本地代理的调整
• 可选：Nginx层OPTIONS请求处理规则

修复步骤 #

1. 修正Laravel CORS配置 #

打开config/cors.php，修改为以下内容：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['https://nuxt-app.domain.com'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

修改完成后执行生产环境缓存清理命令：
php artisan config:clear
php artisan route:clear
php artisan cache:clear

2. 修正前端请求逻辑，走本地代理 #

修改Register.vue内的请求地址，删掉全量域名，走本地代理避免跨域：

async register() {
  // 替换原来的全路径请求为相对路径
  await this.$axios.get("/sanctum/csrf-cookie");
  await this.$axios
    .$post("/api/register", this.form)
    .then((response) => {       
      console.log(response);
      this.$router.push("/login");
    })
    .catch((error) => {      
      this.errors = error.response.data.errors;
      console.log(this.errors);
    });
},

同时修改nuxt.config.js里的auth配置，删除全量域名配置，适配代理：

laravelSanctum: {
  provider: "laravel/sanctum",
  // 删掉原来的url: "https://api.domain.com"配置项
  endpoints: {
    login: {
      url: "/api/login",
      method: "POST"
    },
    // 其余原有配置保持不变
  }
}

3. 调整Nginx配置（用Nginx部署Laravel时需要） #

在Laravel对应的Nginx server块中添加OPTIONS请求处理规则，避免请求被拦截：

location / {
    try_files $uri $uri/ /index.php?$query_string;
    
    if ($request_method = OPTIONS) {
        add_header Access-Control-Allow-Origin "https://nuxt-app.domain.com";
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Origin, Content-Type, Accept, Authorization, X-Requested-With, X-XSRF-TOKEN";
        add_header Access-Control-Allow-Credentials true;
        add_header Access-Control-Max-Age 1728000;
        return 204;
    }
}

修改完成后重启Nginx生效。

4. 校验.env配置 #

确认.env文件内的配置完全匹配生产环境域名：

SESSION_DOMAIN=.domain.com
# 如果前端服务带端口号，这里需要带上端口，例如nuxt-app.domain.com:3000
SANCTUM_STATEFUL_DOMAINS=nuxt-app.domain.com

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