可以将 crossorigin 属性添加到由 angular cli 生成的脚本标签吗？

Question

Is it possible to add crossorigin attribute to script tags generated by angular cli?

when running my angular app, script tags are added to the end of my index.html:

<script src="runtime-es2015.3d05cbd29d24231258bf.js" type="module"></script>
<script src="polyfills-es2015.28da6787754ec8436843.js" type="module"></script>
<script src="main-es2015.4106b7f4d43a05cb792d.js" type="module"></script>

Is it possible to configure angular-cli so that when those tags are included in the build index.html, that the crossorigin attribute be added to the script declaration:

<script src="runtime-es2015.3d05cbd29d24231258bf.js" type="module" crossorigin="use-credentials"></script>

Why am I asking this? My application is deployed to an apache server that uses basic authentication. When using Firefox or Edge (chrome is fine) the requests for the javascript modules receive a 401 error because the Authorization header is not set. If the crossorigin tag is added, the Authorization header is set. Therefore, I need to be able to add that crossorigin attribute if I want my users to be able to use FF or Edge.

Thank you for reading my question.

Answer 1

As of angular/cli 8.1 ( PR ) there is a flag that can be set to alter the script tags (and link tags for that matter) in the index.html

--crossOrigin=none|anonymous|use-credentials
Define the crossorigin attribute setting of elements that provide CORS support. Default: none https://angular.io/cli/build

another alternative would have been to use a post build npm step that unwraps the index.html and alters it based on various needs

cheeriojs comes in mind for these kind of manipulations on the server side (check this example for some more details)