oss对象本地开发跨域问题

.env.development

@@ -3,6 +3,9 @@ ENV = 'development'
 # REST API地址
 VITE_BASE_URL = '/api' # 配合vite.config.js中的代理配置解决跨域问题
 
+# 本地开发OSS对象服务跨域代理标识
+VITE_OSS_CORS_FLAG = '/oss/'  # 本地开发需要在vite.config.js中配置代理
+
 # ws地址
 VITE_WS_URL = 'ws://localhost:8080/ws'
 

.env.production

@@ -3,6 +3,9 @@ ENV = 'production'
 # REST API地址
 VITE_BASE_URL = 'https://open-anylink.com/api/'
 
+# 本地开发OSS对象服务跨域代理标识
+VITE_OSS_CORS_FLAG = '' # 生产环境不用配置代理，在OSS控制台的bucket下设置跨域来源即可
+
 # ws地址
 VITE_WS_URL = 'wss://open-anylink.com/ws'
 

src/components/common/EditAvatar.vue

@@ -31,7 +31,7 @@ const avatar = computed(() => {
 // 打开的时候触发
 const onOpen = () => {
   fileName.value = avatar.value?.split('/').pop()
-  srcImg.value = avatar.value
+  srcImg.value = import.meta.env.VITE_OSS_CORS_FLAG + avatar.value
   previewImg.value = srcImg.value
   resetData.value = {
     previewImg: previewImg.value

vite.config.js

@@ -19,6 +19,12 @@ export default defineConfig({
         // 获取请求中带 /api 的请求
         target: 'http://localhost:8080', // 后台服务器的源
         changeOrigin: true // 修改源
+      },
+      '/oss/': {
+        // 获取图片的请求
+        target: 'https://bk0528.oss-cn-beijing.aliyuncs.com', // 对象存储oss的源
+        changeOrigin: true, // 修改源
+        rewrite: (path) => path.replace(/^\/oss\//, '')
       }
     }
   },