Laravel已配置CORS仍遭拦截，CSS/JS无法加载问题求助

问题根源分析 #

你遇到的跨域错误和Laravel的config/cors.php无关——这个配置仅针对API路由生效，而Vite资源请求（@vite/client、app.js）是前端页面直接向Vite开发服务器发起的，不属于API路由范畴。核心问题是Docker容器内的Vite服务绑定地址不正确，导致宿主浏览器访问时触发跨域限制，同时端口映射可能未配置到位。

分步解决方案 #

1. 修改Vite配置文件 #

在项目根目录的vite.config.js中添加服务器配置，让Vite服务允许外部访问并处理跨域：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        host: '0.0.0.0', // 允许Docker容器外部访问Vite服务
        port: 5173,
        origin: 'http://localhost:5173', // 匹配浏览器访问的Vite地址
        cors: true, // 开启Vite自身的跨域支持
    },
});

2. 配置Docker端口映射 #

启动容器时必须将容器的5173端口映射到宿主机器：

• 用docker run命令：

docker run -p 8080:80 -p 5173:5173 your-laravel-image

• 用docker-compose.yml：

services:
  laravel:
    # ...其他配置项
    ports:
      - "8080:80"
      - "5173:5173"

3. 无需修改Apache或.htaccess的CORS规则 #

你的Apache虚拟主机配置已经正常，跨域问题的核心不在Web服务器层，不需要额外添加CORS规则。

4. 修复favicon 500错误 #

将favicon.ico文件放入项目的public目录，Laravel即可正确返回该文件，消除500错误。

5. 重启服务验证 #

1. 重启Docker容器
2. 重新启动Vite开发服务器：npm run dev
3. 刷新浏览器检查跨域错误是否消失

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