vue3 vite 跨域问题搞死人

vite.config.js

  server: {
    host: '0.0.0.0',
    // port: 80,
    proxy: {
      '/api': {
        target: 'https://xxx.com', //目标url
        changeOrigin: true, //支持跨域
        rewrite: (path) => path.replace(/^\/api/, ''),
        //重写路径,替换/api
        // ws:true,
      },
    },
  },

最近被 vue3 的跨越问题搞死人，部署到服务器，服务器配置文件：

## 后台接口
  location /api {
    proxy_pass https://xxx.com;
  }

关键是这个东东不能复现，有时候运行正常，有时候又不行，真是搞死人了。绝大部分时候运行不了。不知道是什么原因。

后来想，实在没办法，把 vue 上传用 npm run dev 吧，可是 echats 图加载，element-plus 加载又是搞死人，一个 echats 有 19 兆，element-plus 有 17 兆，页面要加载 40 秒！！
echats 按需加载：

import * as echarts from '../../../node_modules/echarts/lib/echarts';

import '../../../node_modules/echarts/lib/component/title';
import '../../../node_modules/echarts/lib/component/legend';
import '../../../node_modules/echarts/lib/component/radar';
import '../../../node_modules/echarts/lib/chart/radar';

elment-plus:

// vite.comfig.js
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

// plugins: []
    // 自动加载ui模块
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),

echarts 是解决了，但在 npm run dev 模式下 elment-plus 永远是要加载 17m 大小的文件。后来想一想，build 里的 dist 是需要 Nginx 服务器来进行代理进行跨域，npm run dev 是 node 进行解决跨越，那 npm run preview 不是也可以使用 node 来解决跨域吗？

赶紧上传，npm run preview，kao，解决了！！！

// package.json
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 80"
  },

npm run preview 叫预览，明明是 production 嘛，node 模式下的生产模式啊。

这样再也不用烦恼跨越问题了……

在 @star7th 的提醒下，又再次看看 Nginx 和 vite 代理的差异，发现 vite 的 proxy 是替换，而 Nginx 则没有。

  location /api {
    rewrite ^/api/(.*) /$1 break;
    proxy_pass https://xxx.com;
  }

所以要把 api 这个自定义的路由前缀给屏蔽掉。之前部署的时候，在代码里把 api 给替换了，这次忘记了。本地测试的时候地址是 xxx/api/api/xxx，正常读取数据，部署的时候还以为也需要这样，部署的时候要把去掉一个 api。

本作品采用《CC 协议》，转载必须注明作者和本文链接

andu

课程读者 128 声望

暂无个人描述~

0 人点赞

推荐文章：

更多推荐...

博客

vite2-electron-vadmin 一款清爽UI中后台权限管理系统|Electron-Vue3后台 12 / 3 |

讨论数量: 4

star7th

308 声望

你应该多去了解 nginx 知识，或者问下 AI 怎么写。生产环境，使用 dev 模式的话，文件大，性能差，承受的用户量急剧下降。

2年前评论

star7th

308 声望

nginx 配置个转发的问题，不需要绕那么大弯。我预感大概率问题出现在你的反向代理配置没处理一些 header 之类的试试用这个


server {
    listen       80;
    server_name  test.showdoc.com.cn;
    client_max_body_size 1000m;
    location ^~ / {
        proxy_pass http://127.0.0.1:4999/;
        proxy_redirect off;
        proxy_connect_timeout 90;
        proxy_send_timeout 90;
        proxy_read_timeout 90;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header http_user_agent $http_user_agent;
    }
}

2年前评论

andu （楼主）

谢谢评论。这些都试过的啊，不起作用。关键是之前部署成功过，这次新服务器部署不成功，放之前的成功，然后就注释后再开启，又不成功了。重启服务器又成功，注释修改，然后又不成功了。配置都很简单，不存在修改其他文件。主要是没找到错在什么地方。

Dash007

课程读者 74 声望

配置 proxy 不是在本地开发的时候才用的吗，上线就配置 BASE_URL 就行了

1年前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

vue3 vite 跨域问题搞死人

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

vue3 vite 跨域问题搞死人

推荐文章：

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录