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>