向OVH对象存储(OpenStack Swift)上传文件遇跨域问题求助

我来帮你梳理这个跨域问题的根源和解决办法——你已经尝试了设置Access-Control-Expose-Headers但没生效，核心问题出在跨域预检请求（OPTIONS）的响应配置上，而不是你在前端POST请求里添加的请求头。

为什么你的当前设置不生效？ #

跨域场景下，浏览器会先发送OPTIONS预检请求，用来确认服务器是否允许后续的实际请求（比如你的POST上传）。你在POST请求里添加Access-Control-Expose-Headers是没用的：

• 这个头必须出现在OPTIONS请求的响应头里，告诉浏览器“我允许前端读取这些响应头”；
• 从你贴的Firefox请求信息来看，OPTIONS请求里浏览器已经在询问服务器是否允许access-control-expose-headers这个请求头，但服务器的响应里大概率没返回对应的Access-Control-Allow-Headers，也没返回Access-Control-Expose-Headers: Location，导致浏览器拦截了后续的头读取操作。

针对OVH Swift存储的正确解决步骤 #

你需要直接在OVH对象存储的目标容器上配置CORS规则，而不是只在前端请求里加头：

1. 通过Swift API配置CORS规则（用curl示例）：
   替换命令里的认证令牌、项目ID、容器名等参数，给目标容器添加包含以下规则的CORS配置：

   curl -X PUT -H "X-Auth-Token: YOUR_AUTH_TOKEN" \
   -H "Content-Type: application/json" \
   https://storage.gra1.cloud.ovh.net/v1/AUTH_YOUR_PROJECT_ID/YOUR_TARGET_CONTAINER \
   -d '{
     "CORS": [
       {
         "AllowedOrigin": "http://localhost:8089",
         "AllowedMethod": ["POST", "OPTIONS"],
         "AllowedHeader": ["access-control-expose-headers", "tus-resumable", "upload-length", "upload-metadata", "x-auth-token"],
         "ExposeHeader": ["Location"],
         "MaxAgeSeconds": 3600
       }
     ]
   }'
   

2. 关键配置项说明：

   • AllowedOrigin：设置为你的前端地址（比如http://localhost:8089），如果需要支持多个源可以用数组；
   • AllowedMethod：至少包含POST和OPTIONS，对应你的上传请求和预检请求；
   • AllowedHeader：必须包含你请求里携带的所有自定义头（就是Firefox里Access-Control-Request-Headers列出的那些）；
   • ExposeHeader：明确写上Location，这是让浏览器允许前端读取这个响应头的核心配置。

3. 验证配置生效：
   配置完成后重新发起上传请求，在浏览器开发者工具里查看OPTIONS请求的响应头，确认包含：

   • Access-Control-Expose-Headers: Location
   • Access-Control-Allow-Headers包含你需要的所有请求头

额外提示 #

从请求头里的tus-resumable来看，你应该是在用tus协议做断点续传，确保CORS规则里的AllowedMethod和AllowedHeader也覆盖tus协议需要的方法（比如PATCH）和头，避免后续出现其他跨域问题。

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