基于Laravel/Homestead+Vue+Vite的Hello应用出现浏览器CORS错误

问题分析 #

出现的CORS错误核心原因是Homestead虚拟机环境与Vite默认服务绑定地址不匹配：

• Vite默认将开发服务绑定到127.0.0.1:5173，仅允许本地访问
• 你通过Homestead虚拟机IP（如192.168.10.10）或自定义域名访问Laravel站点时，浏览器从该域名发起的请求去访问127.0.0.1:5173，属于跨域请求，被同源策略拦截。

解决方案 #

1. 修改Vite配置，允许外部访问并指定正确Origin #

更新vite.config.js，添加server配置项，让Vite服务绑定到虚拟机所有网络接口，并设置与Homestead站点匹配的Origin：

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js', 'resources/css/app.css'],
            refresh: true,
        }),
    ],
    server: {
        // 绑定到所有网络接口，允许虚拟机外部（本地机器）访问
        host: '0.0.0.0',
        // 替换为你的Homestead站点域名+Vite端口，例如laravel-vue.test
        origin: 'http://laravel-vue.test:5173'
    }
});

2. 配置Homestead端口转发（按需） #

如果Homestead未自动转发5173端口，在Homestead.yaml中添加端口转发规则：

ports:
    - send: 5173
      to: 5173

修改后执行homestead provision让配置生效。

3. 重启Vite开发服务 #

停止当前Vite服务（按Ctrl+C），重新启动：

npm run dev

此时Vite会提示服务地址包含虚拟机IP或0.0.0.0，确保能被本地浏览器访问。

4. 验证APP_URL配置 #

检查.env文件中的APP_URL是否与访问的Homestead站点域名一致：

APP_URL=http://laravel-vue.test

5. 清除浏览器缓存 #

按Ctrl+Shift+R强制刷新页面，清除缓存的旧资源。

验证 #

完成以上步骤后重新访问站点，浏览器控制台的CORS错误应消失，Vue的Hello, Vue!内容会正常渲染。

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