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 协议》,转载必须注明作者和本文链接
讨论数量: 4

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

2年前 评论

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 (楼主) 2年前

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

1年前 评论