本文基于vue3 + vite  + element-plus  +  pnpm

报错：**** has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

原因：前端不能直接访问其他IP，需要用vite.config.ts    （其他框架文件名可能略有不同）做个代理，拦截本地IP替换成外部IP

解决方案：

比如在页面中，我们要访问一个页面

http://10.10.10.10:8082/webroot/88888

我们本地IP是：

http://11.11.11.11:8000/mvp

那么就需要配置跨域：

1. 在vite.config.ts配置，

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/

export default defineConfig({ -- -->

    base: '/mvp',

  plugins: [vue()],

  server:{

    host:'0.0.0.0',

    port:'8000',

    public: '11.11.11.11:8000',

    // 配置多个代理

    proxy: {

          '/webroot': {

            target: 'http://10.10.10.10:8082/webroot/88888',

            changeOrigin: true,

            ws: true,

        },

  },

}})

重点就是这个蓝色部分，

2. 在页面中 把URL的IP改成 本地IP

ps:相当于 前端页面是访问的本地IP，但是在 vite 文件中被修改成真正的IP