请求Import Map URL资源时的请求头、Cookie规则及配置方法

问题背景与提问 #

Import Map允许指定JavaScript组件或库的实际导入位置，可包含远程URL，示例代码如下：

<script type="importmap">
{
  "imports": {
    "foo": "https://example.com/bar.js"
  }
}
</script>

通过import('foo')会动态导入托管在example.com上的bar.js内容。

针对该远程请求，需要明确以下问题：

• 会发送哪些请求头和Cookie？
• 是否可对请求头和Cookie进行配置？
• 当资源域名与网站域名匹配（同域）或不匹配（跨域）时，上述规则有何差异？

回答 #

1. 默认请求头与Cookie行为 #

同域场景

• 请求头：会发送浏览器常规请求头，包括Accept、Accept-Language、Referer、User-Agent等标准头，无额外限制。
• Cookie：自动携带当前域名下符合SameSite、Secure等属性规则的所有Cookie。

跨域场景

• 请求头：默认仅发送简单请求头，包括Accept、Accept-Language、Content-Type（仅限application/x-www-form-urlencoded、multipart/form-data、text/plain三种值）。
• Cookie：默认不会携带任何Cookie到跨域地址，除非满足跨域凭证的配置要求。

2. 请求头与Cookie的配置方式 #

请求头配置

动态import()支持通过第二个参数自定义请求头，示例：

import('foo', {
  headers: {
    'X-Custom-Header': 'custom-value'
  }
})

跨域场景下，服务器必须在响应头中配置Access-Control-Allow-Headers: X-Custom-Header，否则自定义头会被浏览器拦截。静态导入（import foo from 'foo'）无法自定义请求头。

Cookie配置

• 同域场景：Cookie携带遵循浏览器默认规则，只需Cookie自身属性（如SameSite）符合当前请求环境，无需额外配置。
• 跨域场景：要携带Cookie，需同时满足两个条件：
  1. 客户端在import()中设置凭证模式：

     import('foo', {
       credentials: 'include'
     })
     

  2. 服务器端配置CORS响应头：

     Access-Control-Allow-Credentials: true
     Access-Control-Allow-Origin: https://your-origin-domain.com
     

     注意：Access-Control-Allow-Origin不能设为*，必须指定具体的请求源域名。

3. 同域与跨域的规则差异 #

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