React前端上传文件到ADLS Gen2时遇空文件及CORS问题求助

问题详情 #

• 目标存储结构：{workspaceId}/{requestId}/Raw/{fileName}.csv
• 上传流程：浏览器发起两次请求，第一次返回201 Created，服务器生成名称正确的空文件；第二次携带&position=0&action=append参数的请求出现CORS错误
• 已配置开放PUT/MERGE/POST等所有请求方法，但问题依旧

相关代码 #

import { DataLakeServiceClient } from '@azure/storage-file-datalake'

...

const onUpload = async (file: File) => {

    // 获取上传链接
    const endpointData = await getUploadEndpoint()

    const dataLakeServiceClient = new DataLakeServiceClient(`${endpointData.data}`)
    const requestId = dataLakeServiceClient.url.split('/')[4]
    const subFolderName = 'Raw'

    const containerClient = dataLakeServiceClient.getFileSystemClient('')    
    const fileClient = containerClient.getFileClient(file.name)

    const options = {
          pathHttpHeaders: { contentType: file.type }
    }

    // 尝试上传文件
    try {
        await fileClient.upload(file, { ...options })
    } catch (error) {
        console.log('error:', error)
    }
} 

截图信息 #

• 第一次请求返回201：请求状态码为201 Created，请求路径匹配目标文件存储路径，成功创建空文件
• 第二次请求CORS错误：浏览器控制台提示CORS相关错误，请求URL包含position=0&action=append参数
• 服务器CORS设置：已配置允许的来源、包含PUT/MERGE/POST在内的请求方法，以及相关头部信息

解决方案 #

1. 修正CORS配置（核心步骤） #

• 添加OPTIONS方法：浏览器预检请求使用OPTIONS方法，必须将其加入允许的方法列表，否则会直接拦截后续请求
• 放宽头部限制：暂时将“允许的头部”设为*（测试环境），确认问题解决后再缩小到ADLS所需的特定头部（如x-ms-blob-type、Content-Length、x-ms-version等）
• 检查来源配置：确保允许的来源与前端页面域名完全一致，包括协议（http/https）和端口；若需临时测试，可设为*（生产环境不建议）
• 确认规则优先级：Azure存储最多支持5条CORS规则，确保你的规则排在最前面且没有被其他规则覆盖

2. 验证文件路径正确性 #

当前代码中getFileClient(file.name)仅传入文件名，需确认是否拼接了完整的存储路径{workspaceId}/{requestId}/Raw/{fileName}.csv。修改路径构造逻辑：

// 需补充获取workspaceId的逻辑
const workspaceId = "你的workspaceId"; 
const filePath = `${workspaceId}/${requestId}/${subFolderName}/${file.name}`;
const fileClient = containerClient.getFileClient(filePath);

3. 调试与验证 #

• 清除浏览器缓存后重新发起请求
• 使用浏览器开发者工具查看预检请求（OPTIONS）的响应，确认是否包含正确的CORS头部

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