本文基于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

















![Java [ 基础 ] 方法引用 ✨](https://img-blog.csdnimg.cn/direct/b626a058e40a4131b4c1a8e8bd171ee2.png)

