Vue Vite SPA请求Laravel API报404错误，求排查解决

核心问题 #

请求发往前端服务端口（5173）而非后端（8000），根源是axios的baseURL配置错误，同时缺少跨域代理配置导致潜在的浏览器跨域拦截问题。

1. 修复axios baseURL配置 #

你的src/services/api.js中错误地通过process.env.NODE_ENV.VUE_APP_API_URL访问环境变量，Vite会自动将VUE_APP_前缀的环境变量注入到process.env全局对象中，正确写法如下：

修改后的src/services/api.js：

import axios from 'axios';

const api = axios.create({ 
  baseURL: process.env.VUE_APP_API_URL 
});

export default api;

2. 配置Vite代理解决跨域 #

前端服务（5173）和后端服务（8000）属于不同端口，浏览器会触发跨域拦截。在vite.config.ts中添加代理配置，将前端API请求转发到后端：

修改后的vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import VueRouter from 'unplugin-vue-router/vite'
import { VueRouterAutoImports } from 'unplugin-vue-router'
import Components from 'unplugin-vue-components/vite'
import { HeadlessUiResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    VueRouter({}),
    vue(),
    Components({ resolvers: [HeadlessUiResolver()] }),
    AutoImport({
      imports: ['vue', '@vueuse/head', VueRouterAutoImports],
    }),
  ],
  server: {
    open: true,
    // 添加代理配置
    proxy: {
      '/api': {
        target: process.env.VUE_APP_API_URL,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 移除路径中的/api前缀
      }
    }
  },
})

如果使用代理，建议将api.js的baseURL改为'/api'，避免代码中硬编码后端地址：

import axios from 'axios';

const api = axios.create({ 
  baseURL: '/api' 
});

export default api;

3. 重启Vite服务 #

修改.env文件或Vite配置后，必须重启Vite开发服务器，否则新配置不会生效。

4. 验证环境变量加载 #

可以在组件中添加日志确认环境变量是否正确加载：

console.log('API URL:', process.env.VUE_APP_API_URL);

额外注意 #

你的后端接口实际地址是http://127.0.0.1:8000/user/projects，而.env中配置的是localhost:8000，虽然本地环境下两者等价，但如果出现解析问题，可以将.env中的地址改为http://127.0.0.1:8000。

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