nuxt3 解决静态资源和跨域转发问题

最新推荐文章于 2025-09-18 02:22:49 发布

原创最新推荐文章于 2025-09-18 02:22:49 发布 · 317 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端 #javascript

一直配置proxy无效最终找到解决办法和原因
问题出在代理路径匹配和重写规则上。当前请求通过 http://192.168.6.160:8300/prod-api/… 访问，但代理没有正确转发到目标服务器
解决方案：配置 Nitro 服务器路由忽略规则
在 nuxt.config.ts 中添加 Nitro 配置，让服务器直接处理 /prod-api 开头的请求，绕过 Vue Router

export default defineNuxtConfig({
  // ...其他配置保持不变

  nitro: {
    // 关键：配置服务器路由规则
    routeRules: {
      // 所有以 /prod-api 开头的请求直接代理到目标服务器
      '/prod-api/**': {
        proxy: 'http://192.168.6.222:99/prod-api/**'
      }
    },
    server: {
      cors: {
        origin: ['http://192.168.6.160:8300', 'http://localhost:8300'],
        methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
        allowedHeaders: ['*']
      }
    }
  },

  // 移除 devServer.proxy 配置，改用 Nitro 的 routeRules 统一处理
  devServer: {
    host: '0.0.0.0',
    port: 8300
  }
})