fix(modern): send credentials when loading script modules. (#1695)

* Send credentials when loading script modules.

Otherwise, things like BasicAuth won't work.

* fix: updated modern mode tests.

* fix: updated crossorigin comment.

* fix: typo

Author: trashpanda001

packages/@vue/cli-service/__tests__/modernMode.spec.js

@@ -25,13 +25,13 @@ test('modern mode', async () => {
   // assert correct asset links
   const index = await project.read('dist/index.html')
 
-  // should use <script type="module"> for modern bundle
-  expect(index).toMatch(/<script type=module src=\/js\/chunk-vendors\.\w{8}\.js>/)
-  expect(index).toMatch(/<script type=module src=\/js\/app\.\w{8}\.js>/)
+  // should use <script type="module" crossorigin=use-credentials> for modern bundle
+  expect(index).toMatch(/<script type=module src=\/js\/chunk-vendors\.\w{8}\.js crossorigin=use-credentials>/)
+  expect(index).toMatch(/<script type=module src=\/js\/app\.\w{8}\.js crossorigin=use-credentials>/)
 
-  // should use <link rel="modulepreload"> for modern bundle
-  expect(index).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js rel=modulepreload>/)
-  expect(index).toMatch(/<link [^>]*js\/app\.\w{8}\.js rel=modulepreload>/)
+  // should use <link rel="modulepreload" crossorigin=use-credentials> for modern bundle
+  expect(index).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js rel=modulepreload crossorigin=use-credentials>/)
+  expect(index).toMatch(/<link [^>]*js\/app\.\w{8}\.js rel=modulepreload crossorigin=use-credentials>/)
 
   // should use <script nomodule> for legacy bundle
   expect(index).toMatch(/<script src=\/js\/chunk-vendors-legacy\.\w{8}\.js nomodule>/)

packages/@vue/cli-service/lib/webpack/ModernModePlugin.js

@@ -38,9 +38,12 @@ class ModernModePlugin {
       compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(ID, async (data, cb) => {
         // use <script type="module"> for modern assets
         const modernAssets = data.body.filter(a => a.tagName === 'script')
-        modernAssets.forEach(a => { a.attributes.type = 'module' })
+        modernAssets.forEach(a => {
+          a.attributes.type = 'module'
+          a.attributes.crossorigin = 'use-credentials'
+        })
 
-        // inject Safari 10 nomdoule fix
+        // inject Safari 10 nomodule fix
         data.body.push({
           tagName: 'script',
           closeTag: true,
@@ -62,7 +65,7 @@ class ModernModePlugin {
         data.html = data.html
           // use <link rel="modulepreload"> instead of <link rel="preload">
           // for modern assets
-          .replace(/(<link as=script .*?)rel=preload>/g, '$1rel=modulepreload>')
+          .replace(/(<link as=script .*?)rel=preload>/g, '$1rel=modulepreload crossorigin=use-credentials>')
           .replace(/\snomodule="">/g, ' nomodule>')
       })
     })