报错
跨域(CORS)的核心是“同源策略”。“同源”要求协议、域名、端口三者完全相同。只要端口不同,就属于不同的“源”。我是端口不通,80和9000端口不同
在这里插入图片描述

解决方案:使用Nginx反向代理(推荐用于生产环境)

此方案通过让Nginx代理MinIO的请求,使浏览器认为资源与前端页面同源,从而绕过CORS限制。这种方法更灵活,也便于管理。

配置Nginx
假设您的Web页面由Nginx服务,可以在其配置文件中添加如下设置:


server {
    listen 50033;
    server_name 10.90.11.15;

    location / {
            proxy_pass http://10.90.13.43:30001/;
            proxy_set_header Host $proxy_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;

            # 处理 OPTIONS 预检请求:直接返回 204,并在此处添加 CORS 头
            if ($request_method = OPTIONS) {
                add_header Access-Control-Allow-Origin "*" always;
                add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS, PATCH" always;
                add_header Access-Control-Allow-Headers "*" always;
                add_header Access-Control-Max-Age "1728000" always;
                add_header Content-Type "text/plain; charset=UTF-8";
                add_header Content-Length 0;
                return 204;
            }

            # 非 OPTIONS 请求:也添加 CORS 头(这里会生效)
            add_header Access-Control-Allow-Origin "*" always;
            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS, PATCH" always;
            add_header Access-Control-Allow-Headers "*" always;
            add_header Access-Control-Max-Age "1728000" always;

    }
}

测试
在这里插入图片描述
检查跨域是否生效

模拟前端运行在 http://10.90.13.43:30001,试图向 http://10.90.11.15:50033/发送 POST 请求

curl -X OPTIONS http://10.90.11.15:50033/ \
  -H "Origin: http://10.90.13.43:30001" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: Content-Type" \
  -v

在这里插入图片描述

更多推荐