Laravel静态资源跨域错误需由Web服务器（Nginx/Apache）直接添加CORS响应头，因/public下CSS等文件由服务器直发、不经过PHP中间件；Nginx需在location匹配规则中用add_header ... always注入Access-Control-Allow-Origin等头，Apache则通过mod_headers在.htaccess中设置FilesMatch规则。
前端页面通过或@import引入Laravel项目public目录下的CSS文件时，浏览器报“CORS header ‘Access-Control-Allow-Origin’ missing”错误，说明静态资源请求被同源策略拦截，需让Web服务器（而非PHP）直接响应跨域头。
确认是否真为CSS跨域问题
打开浏览器开发者工具 → Network标签页 → 找到对应CSS请求 → 查看Response Headers中是否有Access-Control-Allow-Origin字段。如果没有，且状态码是200但控制台报跨域错误，说明是静态资源跨域，不是API接口问题。
【关键前提】 此问题与Laravel的PHP中间件无关，HandleCors中间件对/public下的静态文件完全不生效，因为Nginx/Apache直接返回文件，根本不经过PHP。
Nginx配置：直接透传并添加CORS头
编辑站点Nginx配置文件（如/etc/nginx/sites-enabled/your-site.conf），在server块内定位到location ~* \.css$ {}区块，或新增匹配规则：
立即学习“前端免费学习笔记（深入）”；
第一步：匹配所有CSS请求
location ~* \.css$ {
第二步：添加跨域响应头
add_header 'Access-Control-Allow-Origin' 'https://your-frontend.com' always;
第三步：允许携带凭证（如需Cookie鉴权）
add_header 'Access-Control-Allow-Credentials' 'true' always;
第四步：声明暴露的响应头（如有自定义X-*头）
add_header 'Access-Control-Expose-Headers' 'X-Custom-Header' always;
第五步：设置缓存并终止后续处理
expires 1y;
add_header Cache-Control "public, immutable";
try_files $uri =404;
}
⚠️ 注意：add_header指令必须加always参数，否则在304响应中会丢失；Origin值不能写*，若前端启用了withCredentials就必须填具体域名。
Apache配置：用mod_headers注入头
确保已启用mod_headers模块（a2enmod headers），然后在站点配置或public/.htaccess中添加：
<IfModule mod_headers.c>
<FilesMatch "\.(css|js|woff|woff2|ttf|eot|svg)$">
Header set Access-Control-Allow-Origin "https://your-frontend.com"
Header set Access-Control-Allow-Credentials "true"
Header set Access-Control-Expose-Headers "X-RateLimit-Remaining"
</FilesMatch>
</IfModule>
这一步操作起来很简单，直接把代码块复制进.htaccess保存即可，无需重启Apache，但需确认AllowOverride All已开启。
开发环境快速绕过（仅限localhost）
方法一：启动Chrome时禁用安全检查（临时方案）
关闭所有Chrome窗口 → 终端执行：
google-chrome --user-data-dir="/tmp/chrome_dev" --disable-web-security --disable-gpu
方法二：用Vite或Webpack Dev Server代理CSS请求
在vite.config.ts中配置：
server: { proxy: { '/css/': { target: 'http://localhost:8000', changeOrigin: true } } }
然后前端引用改为<link href="/css/app.css">，由前端开发服务器转发请求，自然规避跨域。
