Angular项目集成Minio遇跨域错误，求排查解决方法

首先，这个错误的核心原因是你使用了Minio的Node.js服务端SDK在浏览器环境（Angular）中运行，而该SDK并非为浏览器环境设计，内部依赖Node.js的核心模块（如require、fs等），导致Webpack打包时触发了不兼容的模块加载逻辑，从而出现跨域路径错误。

为什么会出现这个错误？ #

你看到的webpack-internal://是Webpack打包时的内部模块路径，Minio的Node SDK在浏览器中尝试加载内部模块时，会触发XMLHttpRequest请求（因为浏览器不支持Node的require机制），但webpack-internal不属于浏览器允许的跨域协议方案（http/https等），因此抛出了这个错误。这不是你的项目配置有问题，而是选错了SDK版本。

解决方案：改用浏览器兼容的Minio SDK #

Minio官方提供了浏览器端的SDK，或者你可以使用Angular封装的Minio库，下面给出两种可行方案：

方案1：使用Minio官方浏览器SDK

1. 引入浏览器版SDK
   在你的Angular项目的src/index.html中添加CDN引入：

   <script src="https://cdn.jsdelivr.net/npm/minio@7.1.13/dist/minio.min.js"></script>
   

2. 在Angular中声明并使用
   在你的MinioClient类中声明全局的Minio变量，然后初始化客户端（注意调整secure参数：80端口是HTTP，所以设为false，之前的secure: true会导致连接失败）：

   declare var Minio: any;
   
   export class MinioClient { 
     minioClient: any;
   
     constructor() {
       this.minioClient = new Minio.Client({ 
         endPoint: '54.223.109.***', 
         port: 80, 
         secure: false, // 80端口用HTTP，必须设为false
         accessKey: '<Redacted>', 
         secretKey: '<Redacted>' 
       }); 
     }
   
     getListBuckets(): void { 
       this.minioClient.listBuckets((err: any, buckets: any) => { 
         if (err) return console.log(err) 
         console.log('buckets :', buckets) 
       }); 
     } 
   }
   

方案2：使用Angular封装的ngx-minio库

这个库已经适配了Angular环境，使用起来更符合Angular的开发习惯：

1. 安装依赖

   npm install ngx-minio --save
   

2. 在AppModule中配置

   import { NgxMinioModule } from 'ngx-minio';
   
   @NgModule({
     imports: [
       NgxMinioModule.forRoot({
         endPoint: '54.223.109.***',
         port: 80,
         secure: false,
         accessKey: '<Redacted>',
         secretKey: '<Redacted>'
       })
     ]
   })
   export class AppModule { }
   

3. 在组件/服务中注入使用

   import { NgxMinioService } from 'ngx-minio';
   
   export class MinioClient { 
     constructor(private minioService: NgxMinioService) {}
   
     getListBuckets(): void { 
       this.minioService.listBuckets().subscribe(
         buckets => console.log('buckets :', buckets),
         err => console.log(err)
       ); 
     } 
   }
   

关键补充：配置Minio服务器的CORS规则 #

无论使用哪种方案，你都需要在Minio服务器上配置CORS规则，允许你的Angular前端域名访问：

1. 如果使用Minio控制台，进入对应存储桶的「CORS」设置，添加以下规则（替换为你的前端域名）：

   [
     {
       "AllowedOrigins": ["http://localhost:4200"],
       "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
       "AllowedHeaders": ["*"],
       "ExposeHeaders": ["ETag"],
       "MaxAgeSeconds": 3000
     }
   ]
   

2. 如果使用Minio命令行工具mc，执行以下命令：

   mc admin config set your-minio-alias cors.rule1.allowed_origins=http://localhost:4200
   mc admin config set your-minio-alias cors.rule1.allowed_methods=GET,PUT,POST,DELETE
   mc admin config set your-minio-alias cors.rule1.allowed_headers=*
   mc admin service restart your-minio-alias
   

内容的提问来源于stack exchange，提问作者Jack Chen