可以将 crossorigin 属性添加到由 angular cli 生成的脚本标签吗? [英] possible to add crossorigin attribute to script tags generated by angular cli?

问题描述

是否可以为angular cli生成的脚本标签添加crossorigin属性?

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

运行我的 angular 应用程序时，脚本标签被添加到我的 index.html 的末尾:

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>

是否可以配置 angular-cli，以便在构建 index.html 中包含这些标签时，将 crossorigin 属性添加到脚本声明中:

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>

我为什么要问这个问题?我的应用程序部署到使用基本身份验证的 apache 服务器.使用 Firefox 或 Edge(chrome 很好)时，对 javascript 模块的请求会收到 401 错误，因为未设置 Authorization 标头.如果添加了 crossorigin 标记，则设置 Authorization 标头.因此，如果我希望我的用户能够使用 FF 或 Edge，我需要能够添加该 crossorigin 属性.

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.

感谢您阅读我的问题.

推荐答案

从 angular/cli 8.1 (PR) 有一个标志可以设置来改变 index.html 中的脚本标签(和链接标签)

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
定义提供 CORS 支持的元素的 crossorigin 属性设置.默认值:无https://angular.io/cli/build

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

另一种选择是使用 post build npm 步骤来解开 index.html 并根据各种需要对其进行更改

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 考虑到了服务器端的这些操作(检查这个 example 了解更多详情)

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

这篇关于可以将 crossorigin 属性添加到由 angular cli 生成的脚本标签吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！