Nginx服务器上Laravel 11结合React+Inertia开发时跨域请求被阻止的问题求助

数据老陈

2026-4-13

你好呀！我看你在Laravel 11 + React + Inertia的开发场景下遇到了跨域请求被拦截的问题，而且是部署在Nginx服务器上的，先给你梳理几个大概率能解决问题的方向，你可以一步步排查试试~

先补全并优化Vite配置
你提供的vite.config.js代码看起来没写完，host字段只写了mangalmal，得补成完整的域名或者服务器IP，比如mangalmal.your-domain.com。另外，开发环境下一定要给Vite开启跨域支持，最好再配置代理转发把API请求导到Laravel后端，这样从根源上避免跨域问题：

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./localhost-key.pem'),  // 保持你的证书配置
      cert: fs.readFileSync('./localhost.pem'),
    },
    host: 'mangalmal.your-domain.com',  // 补全完整域名
    cors: true,  // 全局开启跨域支持
    // 配置代理，把API请求转发到Laravel后端
    proxy: {
      '/api': {
        target: 'https://your-laravel-backend-domain.com',  // 替换成你的Laravel后端地址
        changeOrigin: true,
        secure: false,  // 如果后端用的是自签HTTPS证书，一定要开这个
      }
    }
  }
});

配置代理后，前端发起API请求时直接用/api/xxx的路径就行，不用写后端的完整域名，Vite会自动帮你转发。

检查Laravel的CORS配置文件
Laravel 11自带了config/cors.php配置文件，得确保这里允许你的前端域名访问：

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['https://mangalmal.your-domain.com'],  // 填你的前端完整域名
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,  // 如果请求带Cookie或认证信息，必须设为true
];

改完配置后记得清空Laravel的缓存：php artisan config:clear

调整Nginx的跨域响应头
如果是生产环境部署，或者Nginx作为反向代理，得在Nginx的站点配置里添加跨域相关的响应头：

server {
    listen 443 ssl;
    server_name mangalmal.your-domain.com;

    # 跨域核心配置
    add_header Access-Control-Allow-Origin $http_origin;
    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
    add_header Access-Control-Allow-Headers 'Content-Type, Authorization, X-Requested-With';
    add_header Access-Control-Allow-Credentials 'true';

    # 处理OPTIONS预检请求，直接返回204
    if ($request_method = OPTIONS) {
        return 204;
    }

    # 其他Nginx配置（比如根目录、fastcgi_pass等）...
}

修改完Nginx配置后要重启服务：sudo systemctl restart nginx

最后检查请求路径是否正确
有时候跨域问题只是因为手滑写错了请求地址，比如把https写成http，或者域名拼错了，先确认前端发起请求时用的是代理后的/api/xxx路径，而不是直接写后端的完整域名。

你可以先从Vite代理和Laravel CORS配置开始排查，这俩是开发环境下最常见的问题点，如果还有问题，可以把完整的vite.config.js、Nginx配置以及具体的请求报错信息补充一下，这样更容易定位问题~

备注：内容来源于stack exchange，提问作者Mukhila Asokan