テストページ

Amazon S3 では Origin 送ったときにしか CORS 関係のヘッダを返してくれないっぽい。
<link rel="prefetch"> でリクエストしちゃうと Chrome は origin が付かない上にそれをキャッシュしちゃう。
そして肝心の script タグでの読み込みの時に、そのキャッシュをそのまま使っちゃうので、 CORS ヘッダが無いという理由で読み込みに失敗する
Vary ヘッダで Access-Control-Allow-Origin とか返せば動きそうだけど、そこも S3 の範疇……。

ソース

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1">
  <title>crossorigin test</title>
  <link rel="prefetch" href="https://s3-ap-northeast-1.amazonaws.com/macoshita-test-crossorigin/main.js"
        crossorigin> <!-- important -->
</head>
<body>
  <h1>crossorigin prefetch test (maybe success)</h1>
  <a id="test" href="javascript:void(0)">Click to load script</a>
  <script>
    document.getElementById('test').addEventListener('click', function () {
      const script = document.createElement('script')
      script.src = 'https://s3-ap-northeast-1.amazonaws.com/macoshita-test-crossorigin/main.js'
      script.crossOrigin = 'crossorigin'

      document.getElementsByTagName('head')[0].appendChild(script)
    }, false)
  </script>
</body>
</html>

この記事の英語版