Laravel 12 使用@vite时81端口被CORS策略拦截问题求助

问题根源 #

页面通过http://test.loc:81（Nginx服务）访问，但构建后的静态资源请求目标是http://test.loc/build/assets/...（Apache默认80端口服务），两者端口不同属于不同源，浏览器CORS策略拦截了跨域请求，且Apache未返回允许跨域的响应头。直接使用Apache时页面与资源同域，因此无报错。

可行修复方案 #

方案1：Nginx代理静态资源请求（推荐） #

修改Nginx配置，将/build/assets/开头的请求代理到Apache，让页面和资源的访问域名端口完全一致，从根源避免跨域。
在Nginx对应server块中添加：

location /build/assets/ {
    proxy_pass http://test.loc; # 替换为你的Apache实际访问地址，如http://127.0.0.1:80
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

修改完成后重启Nginx，此时资源请求会通过Nginx转发到Apache，浏览器判定为同域请求，不再触发CORS拦截。

方案2：Apache配置CORS响应头 #

若不想调整Nginx代理逻辑，可在Apache中配置允许test.loc:81跨域访问的响应头：

• 虚拟主机配置：在对应<VirtualHost>块中添加

Header set Access-Control-Allow-Origin "http://test.loc:81"
Header set Access-Control-Allow-Methods "GET, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type"

• .htaccess配置：确保Apache开启mod_headers模块，在项目根目录的.htaccess中添加上述代码。
  修改后重启Apache，静态资源响应会携带允许跨域的头，浏览器将允许加载资源。

方案3：调整前端构建的资源路径 #

修改前端项目的构建配置，将资源公共路径设置为Nginx的访问地址：

• Vite项目（vite.config.js）：

export default {
  base: 'http://test.loc:81/build/assets/'
}

• Vue CLI项目（vue.config.js）：

module.exports = {
  publicPath: 'http://test.loc:81/build/assets/'
}

重新执行npm run build后，资源会从http://test.loc:81加载，与页面同域，解决CORS问题。

内容的提问来源于stack exchange，提问作者Дмитрий