本文基于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是：
那么就需要配置跨域：
1. 在vite.config.ts配置，
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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