如何在npm中仅使用HTTPS协议引入URL形式的依赖

问题背景 #

你有一个存储在S3中的npm包（示例链接：https://xxx.s3.eu-west-1.amazonaws.com/yyy.tgz），本地项目通过file: xxx.tgz配置依赖可正常使用，但在CodeSandbox或JSFiddle中直接用HTTPS链接配置package.json时，出现错误提示：Could not fetch dependencies, please try again in a couple seconds。

核心原因 #

尽管npm官方支持https协议的依赖链接，但CodeSandbox/JSFiddle的依赖解析环境在请求S3资源时，会遇到跨域资源共享（CORS）限制，或S3对象的访问权限配置不符合第三方平台的请求要求。

解决方案（仅使用HTTPS协议） #

1. 配置S3桶的CORS规则 #

CodeSandbox和JSFiddle的服务在请求S3资源时，需要S3桶明确允许其域名的跨域请求。登录AWS控制台，找到目标S3桶，进入「权限」-「跨域资源共享（CORS）」，添加以下规则：

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://codesandbox.io</AllowedOrigin>
    <AllowedOrigin>https://jsfiddle.net</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

• AllowedOrigin：指定允许发起跨域请求的第三方平台域名；
• AllowedMethod：仅开放GET方法（依赖包获取为只读请求）；
• AllowedHeader：允许所有请求头，避免因自定义头导致的跨域拒绝。

2. 确保S3对象公开可读 #

若S3包为私有对象，即使配置了CORS，CodeSandbox也无法访问。需将目标.tgz对象设置为公开可读：

• 在S3控制台找到该对象，进入「权限」-「对象所有权」，启用「ACLs已启用」；
• 给Everyone用户分配「读取」权限。

3. （临时测试可选）使用带签名的HTTPS链接 #

若不想公开S3对象，可生成AWS S3预签名URL（带临时访问权限的HTTPS链接），有效期可自定义。但该链接有时间限制，过期后需重新生成，仅适合短期测试场景。

验证配置 #

修改S3配置后，重新在CodeSandbox/JSFiddle中配置依赖：

"dependencies": {
  "zzz": "https://xxx.s3.eu-west-1.amazonaws.com/yyy.tgz"
}

刷新环境重新拉取依赖，即可正常加载。

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