Vue3 SPA对接Laravel10 API跨域(CORS)问题排查求助

架构老林

2026-7-3

Vue 3 + Laravel 10 共享主机部署跨域问题修复

问题核心分析

你收到的CORS错误提示Access-Control-Allow-Origin与http://localhost:3000不匹配，说明生产环境下，你的前端请求源或后端允许源配置仍停留在localhost，与实际部署的真实域名不匹配，这是核心矛盾点。

分步修复方案

1. 修正Axios生产环境配置

当前Axios硬编码了localhost测试域名，需替换为真实部署域名，建议改用环境变量管理更灵活：

修改Axios全局配置文件：

import axios from "axios";

axios.defaults.withCredentials = true;
axios.defaults.withXSRFToken = true;
// 用Vite环境变量替代硬编码，适配开发/生产环境
axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL || "http://localhost:8000";
axios.defaults.headers.common['Referer'] = import.meta.env.VITE_FRONTEND_URL || "http://localhost:3000";

axios.defaults.headers.common['Accept']="application/json";

在Vue项目根目录创建.env.production文件，配置生产环境变量：

VITE_API_BASE_URL=https://compta-be.domain.fr
VITE_FRONTEND_URL=https://compta.domain.fr

2. 更新Laravel .env配置

替换所有localhost相关配置为真实生产域名，注意会话域名设置为根域名以支持子域名共享：

APP_NAME=Laravel
APP_ENV=production
APP_KEY=base64:HMCK36s76cGQ18aHGTyU/zV2k4rMnbby527cy0UcTuI=
APP_DEBUG=false
APP_URL=https://compta-be.domain.fr
FRONTEND_URL=https://compta.domain.fr
SANCTUM_STATEFUL_DOMAINS='compta.domain.fr'
SESSION_DOMAIN=.domain.fr

3. 调整CORS配置

确保config/cors.php的允许源正确，若有多个子域名需求，可改用正则匹配更灵活：

return [
    'paths' => ['*'],
    'allowed_methods' => ['*'],
    // 单域名直接用FRONTEND_URL变量
    'allowed_origins' => [env('FRONTEND_URL', 'http://localhost:3000')],
    // 可选：支持所有domain.fr下的HTTPS子域名
    // 'allowed_origins_patterns' => ['/^https:\/\/.*\.domain\.fr$/'],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

4. 清除Laravel配置缓存

生产环境Laravel会缓存配置，修改.env后必须执行以下命令清除缓存：

php artisan config:clear
php artisan cache:clear
php artisan route:clear

5. 前端部署验证

执行npm run build生成生产构建包，将dist目录文件上传至共享主机前端根目录。
确保前端和API均启用HTTPS，避免协议不匹配导致Cookie无法正常传递。

6. 调试验证

打开浏览器开发者工具，查看Network面板：

检查请求的Origin头是否为https://compta.domain.fr。
检查响应的Access-Control-Allow-Origin是否与请求源一致。
查看sanctum/csrf-cookie请求的Set-Cookie头，确认Domain为.domain.fr。

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