minio前端访问跨域问题

最新推荐文章于 2024-12-25 17:28:48 发布

什么都不会の程序猿

最新推荐文章于 2024-12-25 17:28:48 发布

阅读量2.9k

点赞数 3

文章标签：运维开发

本文链接：https://blog.youkuaiyun.com/qq_51032922/article/details/139259364

版权

背景：

正常使用docker部署好的minio，但是文件无法正常使用

阶段1 ：

此阶段极大可能是minio的桶并未并未开放，因此无法正常下载
此时需要登录minio修改，正在使用的minio桶的类型为publice

阶段2：

需要注意的是，如果通过内网ip进行访问minio服务器会造成跨域问题，因此需要通过192.168.xxx.1，将自己的minio映射到公网上，通过公网的ip或者域名进行访问，此时即可解决跨域问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

什么都不会の程序猿

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

使用宝塔搭建MinIO并且设置域名访问

Harry的博客

04-03

1465

Java中解决跨域问题

编程旅者

08-20

635

在Java Web开发中，跨域资源共享（CORS, Cross-Origin Resource Sharing）问题经常遇到，特别是在前端和后端分离的应用中。跨域问题主要出现在浏览器安全策略中，当一个资源（如HTML页面）尝试从不同的源（协议、域名或端口中的任何一个不同）加载资源时，就会触发浏览器的同源策略限制。为了解决这个问题，后端服务器需要配置以允许来自不同源的请求。

参与评论您还未登录，请先登录后发表或查看评论

minio文件跨域问题

LB_bei的博客

01-31

5016

最近前端获取音频的波形报了个错：很奇怪的是这个文件直接用地址能访问正常，项目中直接访问也正常，而在项目中请求波形中就报错，另一个minio中的文件就能正常访问。

前端访问minio请求跨域，minio的跨域，CORS ‘Access-Control-Allow-Origin‘ 未包含在响应等问题

热门推荐

mvcVSstruts的博客

04-29

2万+

前端访问minio请求跨域，minio的跨域，CORS 'Access-Control-Allow-Origin' 未包含在响应等问题

黑马头条Day9-03-网络设置及跨域MinIO部署在云服务器上的解决方法

聂可以的博客

11-24

1087

黑马头条Day9-03-网络设置及跨域MinIO部署在云服务器上的解决方法

解决minio跨域问题

qq_37924396的博客

10-29

4578

minio

Day134-136.尚品汇：平台属性接口、SPU、跨域问题、配置持久化、MinIO 分布式文件存储系统

a111042555的博客

08-26

2289

尚品汇

docker搭建minio服务器，解决内网穿透后外网无法访问问题

胖虎儿的博客

11-30

6765

解决外网映射的MinIo无法访问问题

minio使用，poi解析，uid生成工具，策略工厂模式，模板管理完整功能，swagger集成，跨域，异常处理，分页等可用源代码

06-23

src\main\resources\sql：内含可用sql文件 springboot项目，集成maven依赖：参见pom.xml，如： lombok、log4j2、validation、hutool、commons-lang3、fastjson、poi、knife4j依赖swagger、mysql driver、druid、mybatis及代码生成相关依赖、spring-aop(aspectjweaver)、pagehelper、minio、commons 实现功能如下： 1、部分业务相关CRUD接口和模板管理相关接口。 2、统一异常处理。 3、分页功能：aop实现默认分页赋值。 4、统一结果返回。 5、策略工厂模式：用于不同业务逻辑的实现。 6、uid生成工具。 7、集成swagger在线接口文档。 8、文件上传功能。 9、excel文件解析功能：poi实现。 10、minio分布式存储：API封装并提供统一的请求接口。包括minio部署说明，以及minio 使用源代码注意：需要安装minio服务端，参见readme文档 11、跨域问题解决。 12、线程池应用。

SpringBoot集成minio，并实现文件上传

zhanghuaiwei

11-25

563

SpringBoot集成minio，并实现文件上传

minio-js-browser-upload

05-11

在浏览器环境中直接与Minio服务器通信可能存在安全问题，因为浏览器的同源策略（Same-Origin Policy）限制了跨域请求。为解决这个问题，我们可以使用Minio的预签名URL机制。预签名URL是一种临时的、有限权限的URL，...

MInIO入门-03 秒传+大文件分片上传

m0_67402970的博客

08-02

2555

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦。...

vue - 开发环境 - 跨域解决

weixin_54902466的博客

03-22

2196

产生原因我们熟知的跨域问题产生的原因是 , 浏览器本身为了用户安全生成的http网络安全协议,同源策略 ,当前端项目运行的服务地址和接口服务运行的地址协议域名端口三者有一个不一致就会出现跨域也就是说 , 我们前端项目(在服务器中存放)运行的时候 , 在浏览器的url地址栏上面的地址(前端项目运行的服务器地址) 与后端提供的后端接口地址协议域名端口三者有一个不一致就会出现跨域产生跨域的两个重要元素 : 浏览器的同源策略 , 协议或端口解决方案 1. co.

Minio 配置

AnnieRabbit的博客

09-27

5601

Minio

nginx转发请求访问不了minio

weixin_45656956的博客

01-03

3720

nginx转发无法访问minio, 解决请求头问题的办法

minio部署与使用

北国有鱼的博客

07-23

4308

一、部署minio容器拉取镜像 docker pull minio/minio 编写启动容器脚本（/data/minio） sudo vim mino.sh docker run -d \ -p 80:9000 \ --name=minio \ --restart=on-failure:3 \ -e "MINIO_ACCESS_KEY=admin" \ -e "MINIO_SECRET_KEY=password" \ -v /etc/localtime:/etc/localtime

minio Site Replication跨区域进行配置

12-25

341

针对该情况，需要对 minio1 与minio2 两个服务器上修改hosts文件。之前要在minio1上、minio2上配置相同的用户密码：minioadmin/minioadmin。某些站点在异地的，需要进行minio异地备份操作，而且两个网段中间用的虚拟IP互访。minio2 112.172.8.9 nat 地址 111.172.7.10。minio1 110.172.7.9 nat 地址 111.172.7.9。然后在按照minio官网的配置过程，

yudao前端直连上传minio

最新发布

12-28

### 前端直连上传至MinIO配置与示例代码 #### 配置MinIO服务器以支持CORS请求为了使前端能够直接向MinIO发送HTTP请求，必须先在MinIO上设置跨域资源共享(CORS)策略。这允许来自特定源的请求访问资源。 ```json { "CORSRules": [ { "AllowedOrigins": ["http://localhost:8080"], "AllowedMethods": ["GET", "PUT", "POST", "DELETE"], "AllowedHeaders": ["*"] } ] } ``` 此JSON定义了哪些域名可以发起请求以及允许的方法和头信息[^1]。 #### 客户端JavaScript代码实现文件上传下面是一个简单的React组件例子，用于展示如何构建表单并处理文件提交事件： ```javascript import React from 'react'; class FileUpload extends React.Component { constructor(props){ super(props); this.state = {file:null}; this.onFormSubmit = this.handleFormSubmit.bind(this); this.onChange = this.handleChange.bind(this); } handleChange(event){ this.setState({file:event.target.files[0]}); } async handleFormSubmit(event){ event.preventDefault(); const data = new FormData() data.append('file', this.state.file) try { await fetch('http://your-minio-server-url/upload', { method:'POST', body:data, headers:{ 'Authorization': `Bearer ${process.env.REACT_APP_MINIO_ACCESS_KEY}` } }) console.log('File uploaded successfully'); } catch(error){ console.error('Error:', error); } } render(){ return ( <form onSubmit={this.onFormSubmit}> <h1>File Upload</h1> <input type="file" onChange={this.onChange} /> <button type="submit">Upload</button> </form> ); } } export default FileUpload; ``` 这段代码创建了一个名为`FileUpload`的类组件，它包含了两个主要方法：一个是用来更新状态中的文件对象；另一个则是负责实际执行上传操作，在这里使用了Fetch API来发出带有文件数据的POST请求[^4]。请注意替换`http://your-minio-server-url/upload`为真实的MinIO服务地址，并确保已正确设置了环境变量`REACT_APP_MINIO_ACCESS_KEY`以便于身份验证。