如何在BigCommerce代码库中访问WebDAV文件并解决CORS问题？

方案1：直接引用WebDAV静态资源URL #

BigCommerce的WebDAV目录本身支持静态资源公开访问，你可以直接用文件的公开URL导入：

• 登录BigCommerce后台，进入Storefront > WebDAV，确认products目录的公开路径格式为https://[你的商店域名]/content/products/[文件名]
• 在代码中使用绝对路径导入：

  import File from "/content/products/somefile.js";
  

  或动态导入：

  const File = await import("/content/products/somefile.js");
  

  这种方式绕开了webdav npm包的客户端调用，直接走静态资源请求，不会触发CORS限制。

方案2：通过后端中间层转发请求 #

如果需要动态读取文件或做权限验证，可在自定义后端服务中用webdav包连接服务器，再暴露接口给前端：

• 示例Node.js后端代码（Express框架）：

  const express = require('express');
  const { createClient } = require('webdav');
  const app = express();
  
  // 初始化WebDAV客户端
  const client = createClient(
    'https://[你的WebDAV地址]',
    {
      username: '[你的WebDAV用户名]',
      password: '[你的WebDAV密码]'
    }
  );
  
  // 自定义接口返回文件内容
  app.get('/api/products/:filename', async (req, res) => {
    try {
      const content = await client.getFileContents(`/products/${req.params.filename}`, { format: 'text' });
      res.setHeader('Content-Type', 'application/javascript');
      res.send(content);
    } catch (err) {
      res.status(500).send(err.message);
    }
  });
  
  app.listen(3000);
  

• 前端调用示例：

  const response = await fetch('/api/products/somefile.js');
  const moduleContent = await response.text();
  // 解析JS配置对象（注意安全风险，仅信任自己的文件）
  const productConfig = new Function(`return ${moduleContent}`)();
  

方案3：同步WebDAV文件到代码库 #

若文件更新频率低，可定期将WebDAV中的文件同步到本地代码库：

• 用Cyberduck或命令行工具（如rclone）将webdav/products目录同步到代码库的public/products目录
• 直接用相对路径导入本地文件：

  import File from '../public/products/somefile.js';
  

  这种方式完全避免线上请求的CORS问题，适合静态配置文件。

关键注意事项 #

• 确保WebDAV中的.js文件符合ES模块规范，比如用export default导出配置对象，否则直接导入会报错
• 使用后端转发方案时，要添加权限控制逻辑，防止未授权访问配置文件
• 动态获取文件时，需处理加载失败的异常情况，保证页面稳定性

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