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