尧图网站建设 
Label Studio 标注时外部图片因 CORS 加载失败怎么排查和修复【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio在 Label Studio 中标注任务时如果图片存放在外部托管服务或云存储S3、GCS、Azure上打开标注界面后图片可能加载不出来。项目文档指出资源加载失败最常见的原因就是 CORSCross-Origin Resource Sharing跨域资源共享问题或 Cross Domain 问题浏览器从外部主机拉取图片时会被安全策略拦截。本文说明如何确认故障是 CORS 导致的并按图片来源分别给出修复方式自有托管服务器、云存储预签名 URL、本地 HTTP 服务器以及不需要配置 CORS 的代理模式替代路径。第一步打开浏览器控制台确认故障现象先打开浏览器的开发者工具控制台Console查看报错信息。文档把控制台出现 CORS 错误列为典型现象在云存储场景下如果未配置 CORSLabel Studio 中可能出现以下表现看到的是指向数据的链接而不是数据预览浏览器控制台中出现 CORS 错误。注意区分另一种控制台错误如果看到的是 403 错误而不是 CORS 错误说明是凭证配置不正确属于权限问题而非 CORS 问题应先检查存储连接使用的凭证。确认为 CORS 问题后按图片的实际来源走下面对应的修复分支。图片在自有托管服务器上给 Web 服务器加 CORS 头如果你有托管服务器管理员权限需要允许 Web 服务器的 CORS。以 nginx 为例文档给出的做法是在/etc/nginx/nginx.conf的location段中加入如下配置把YOUR_LOCATION替换为你实际的 location 名称location YOUR_LOCATION { if ($request_method OPTIONS) { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Max-Age 1728000; add_header Content-Type text/plain; charsetutf-8; add_header Content-Length 0; return 204; } if ($request_method POST) { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Expose-Headers Content-Length,Content-Range; } if ($request_method GET) { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Expose-Headers Content-Length,Content-Range; } }文档同时提醒并非所有主机都支持 CORS 配置可以在托管服务的管理后台里查找 CORS 相关设置项。图片在云存储中且使用预签名 URL在存储桶上配置 CORSLabel Studio 通过两种机制从云存储取媒体数据预签名 URL 和存储代理由创建源存储连接时Use pre-signed URLs开关决定。预签名 URL 是默认方式浏览器会收到 HTTP 303 重定向到一个有时效的预签名 URL然后直接从存储侧下载媒体因此必须允许来自 Label Studio 部署同域名的 GET 访问。云存储各平台的做法GCSGoogle Cloud Storage文档给出了可执行的配置与验证命令。先创建cors.json把https://your-label-studio-domain.com替换为你的 Label Studio 实例可访问的 URL[ { origin: [https://your-label-studio-domain.com], method: [GET, HEAD], responseHeader: [Content-Type, Content-Range, Content-Disposition], maxAgeSeconds: 3600 } ]然后把 CORS 配置应用到存储桶并查询确认gcloud storage buckets update gs://YOUR_BUCKET_NAME --cors-filecors.jsongcloud storage buckets describe gs://YOUR_BUCKET_NAME --formatdefault(cors_config)其中YOUR_BUCKET_NAME替换为实际桶名。同一文档中还给出了gsutil的等价写法gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME更完整的配置说明见 GCS 存储文档。S3在桶上配置 CORS 策略允许来自与 Label Studio 部署相同主机名的 GET 访问。具体策略写法参考 Amazon S3 User Guide 中的 CORS 章节见 S3 存储文档 中的链接。Azure Blob Storage在 Azure portal 中进入存储账户页面从左侧菜单打开Settings Resource sharing (CORS)在Blob service下添加如下规则并点击SaveAllowed origins:https://app.humansignal.com文档示例值替换为你实际使用的域名Allowed methods:GET, HEAD, OPTIONSAllowed headers:*Exposed headers:*Max age:3600步骤详见 Azure 存储文档。图片由本地 HTTP 服务器提供改用带 CORS 的服务器如果数据是从类似python -m http.server 8081 -d这样临时搭建的 HTTP 服务器提供的文档给出的替代方案是使用带 CORS 支持的http-server。以下命令会通过 npm 全局安装http-server需要本机已有 Node.js/npm 环境然后以 CORS 模式在 3000 端口提供服务npm install http-server -g http-server -p 3000 --cors替代路径关闭预签名 URL改用存储代理模式对于云存储场景还有另一条不需要配置 CORS 的路径。当Use pre-signed URLs关闭时启用的是存储代理模式Label Studio 后端在服务端获取对象并直接流式传给浏览器所有媒体流量经过 Label Studio 服务器。这种模式的优点是无需 CORS 配置、也无需预签名权限代价是消耗更多 Label Studio worker 资源速度可能略慢。使用代理模式前注意两点限制企业版/Starter Cloud 中组织是否允许存储代理由Organization Usage License中的Enable Storage Proxy控制需要 Owner 角色用户开启该开关关闭时组织内用户无法创建或修改Presigned URLs关闭的源存储连接。自部署环境中大媒体文件按顺序 8 MB 分块流式传输可用环境变量RESOLVER_PROXY_MAX_RANGE_SIZE默认 8 MB单次请求返回的最大分块和RESOLVER_PROXY_TIMEOUT默认 20 秒单请求最大耗时调整。机制对比详见 云存储文档 的 Pre-signed URLs vs. Storage proxies 一节。修复后的验证方式GCS 桶执行上面的gcloud storage buckets describe ... --formatdefault(cors_config)命令确认桶上已挂上你期望的 CORS 配置。其余场景重新打开标注界面确认图片显示为数据预览而不是只显示一个数据链接并且浏览器控制台不再出现 CORS 错误。如果外部主机本身不支持 CORS 配置且图片又不在云存储里无法切到代理模式文档给出的建议是在主机管理后台中查找 CORS 设置项找不到时该托管方式无法直接支持 Label Studio 的跨域加载。更多排查项403 错误、凭证、同步问题等可继续在 故障排查文档 中查看。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Label Studio 标注时外部图片因 CORS 加载失败怎么排查和修复？
Label Studio 标注时外部图片因 CORS 加载失败怎么排查和修复【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio在 Label Studio 中标注任务时如果图片存放在外部托管服务或云存储S3、GCS、Azure上打开标注界面后图片可能加载不出来。项目文档指出资源加载失败最常见的原因就是 CORSCross-Origin Resource Sharing跨域资源共享问题或 Cross Domain 问题浏览器从外部主机拉取图片时会被安全策略拦截。本文说明如何确认故障是 CORS 导致的并按图片来源分别给出修复方式自有托管服务器、云存储预签名 URL、本地 HTTP 服务器以及不需要配置 CORS 的代理模式替代路径。第一步打开浏览器控制台确认故障现象先打开浏览器的开发者工具控制台Console查看报错信息。文档把控制台出现 CORS 错误列为典型现象在云存储场景下如果未配置 CORSLabel Studio 中可能出现以下表现看到的是指向数据的链接而不是数据预览浏览器控制台中出现 CORS 错误。注意区分另一种控制台错误如果看到的是 403 错误而不是 CORS 错误说明是凭证配置不正确属于权限问题而非 CORS 问题应先检查存储连接使用的凭证。确认为 CORS 问题后按图片的实际来源走下面对应的修复分支。图片在自有托管服务器上给 Web 服务器加 CORS 头如果你有托管服务器管理员权限需要允许 Web 服务器的 CORS。以 nginx 为例文档给出的做法是在/etc/nginx/nginx.conf的location段中加入如下配置把YOUR_LOCATION替换为你实际的 location 名称location YOUR_LOCATION { if ($request_method OPTIONS) { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Max-Age 1728000; add_header Content-Type text/plain; charsetutf-8; add_header Content-Length 0; return 204; } if ($request_method POST) { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Expose-Headers Content-Length,Content-Range; } if ($request_method GET) { add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods GET, POST, OPTIONS; add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range; add_header Access-Control-Expose-Headers Content-Length,Content-Range; } }文档同时提醒并非所有主机都支持 CORS 配置可以在托管服务的管理后台里查找 CORS 相关设置项。图片在云存储中且使用预签名 URL在存储桶上配置 CORSLabel Studio 通过两种机制从云存储取媒体数据预签名 URL 和存储代理由创建源存储连接时Use pre-signed URLs开关决定。预签名 URL 是默认方式浏览器会收到 HTTP 303 重定向到一个有时效的预签名 URL然后直接从存储侧下载媒体因此必须允许来自 Label Studio 部署同域名的 GET 访问。云存储各平台的做法GCSGoogle Cloud Storage文档给出了可执行的配置与验证命令。先创建cors.json把https://your-label-studio-domain.com替换为你的 Label Studio 实例可访问的 URL[ { origin: [https://your-label-studio-domain.com], method: [GET, HEAD], responseHeader: [Content-Type, Content-Range, Content-Disposition], maxAgeSeconds: 3600 } ]然后把 CORS 配置应用到存储桶并查询确认gcloud storage buckets update gs://YOUR_BUCKET_NAME --cors-filecors.jsongcloud storage buckets describe gs://YOUR_BUCKET_NAME --formatdefault(cors_config)其中YOUR_BUCKET_NAME替换为实际桶名。同一文档中还给出了gsutil的等价写法gsutil cors set cors-config.json gs://YOUR_BUCKET_NAME更完整的配置说明见 GCS 存储文档。S3在桶上配置 CORS 策略允许来自与 Label Studio 部署相同主机名的 GET 访问。具体策略写法参考 Amazon S3 User Guide 中的 CORS 章节见 S3 存储文档 中的链接。Azure Blob Storage在 Azure portal 中进入存储账户页面从左侧菜单打开Settings Resource sharing (CORS)在Blob service下添加如下规则并点击SaveAllowed origins:https://app.humansignal.com文档示例值替换为你实际使用的域名Allowed methods:GET, HEAD, OPTIONSAllowed headers:*Exposed headers:*Max age:3600步骤详见 Azure 存储文档。图片由本地 HTTP 服务器提供改用带 CORS 的服务器如果数据是从类似python -m http.server 8081 -d这样临时搭建的 HTTP 服务器提供的文档给出的替代方案是使用带 CORS 支持的http-server。以下命令会通过 npm 全局安装http-server需要本机已有 Node.js/npm 环境然后以 CORS 模式在 3000 端口提供服务npm install http-server -g http-server -p 3000 --cors替代路径关闭预签名 URL改用存储代理模式对于云存储场景还有另一条不需要配置 CORS 的路径。当Use pre-signed URLs关闭时启用的是存储代理模式Label Studio 后端在服务端获取对象并直接流式传给浏览器所有媒体流量经过 Label Studio 服务器。这种模式的优点是无需 CORS 配置、也无需预签名权限代价是消耗更多 Label Studio worker 资源速度可能略慢。使用代理模式前注意两点限制企业版/Starter Cloud 中组织是否允许存储代理由Organization Usage License中的Enable Storage Proxy控制需要 Owner 角色用户开启该开关关闭时组织内用户无法创建或修改Presigned URLs关闭的源存储连接。自部署环境中大媒体文件按顺序 8 MB 分块流式传输可用环境变量RESOLVER_PROXY_MAX_RANGE_SIZE默认 8 MB单次请求返回的最大分块和RESOLVER_PROXY_TIMEOUT默认 20 秒单请求最大耗时调整。机制对比详见 云存储文档 的 Pre-signed URLs vs. Storage proxies 一节。修复后的验证方式GCS 桶执行上面的gcloud storage buckets describe ... --formatdefault(cors_config)命令确认桶上已挂上你期望的 CORS 配置。其余场景重新打开标注界面确认图片显示为数据预览而不是只显示一个数据链接并且浏览器控制台不再出现 CORS 错误。如果外部主机本身不支持 CORS 配置且图片又不在云存储里无法切到代理模式文档给出的建议是在主机管理后台中查找 CORS 设置项找不到时该托管方式无法直接支持 Label Studio 的跨域加载。更多排查项403 错误、凭证、同步问题等可继续在 故障排查文档 中查看。【免费下载链接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format项目地址: https://gitcode.com/GitHub_Trending/la/label-studio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考