我在StackOverflow上看到了一些答案，但很难理解，我也尝试过对其进行消毒，但问题是一样的。https://stackoverflow.com/a/61984516/4646531
访问位于"的图像https://mdn.mozillademos.org/files/12676/star.svg'来自原点'http://localhost:4200'已被CORS策略阻止：请求的资源上不存在"Access Control Allow Origin"标头。
<div [ngStyle]="{'-webkit-mask-image': 'url(https://mdn.mozillademos.org/files/12676/star.svg)'}">
yo! This text is contained within a <code>P</code> tag.
</div>
堆叠式上的代码
除了其他答案之外还有一个小问题。
是的，你会遇到CORS错误，除非你控制服务器，否则你不太可能绕过它(http请求https)。
为什么，是因为你把它当作面具。
如果你嵌入一个简单的图像：
<img src="https://mdn.mozillademos.org/files/12676/star.svg">
没有问题，没有错误。
因为你把它当作一个掩码，浏览器必须访问像素本身，所以你要进行更高的安全检查。
这是一个类似于fetch请求的no-cors属性的小：https://developer.mozilla.org/en-US/docs/Web/API/Request/mode-仅仅使用图像就相当于no-cors(仅仅显示它)，而将其用作遮罩就相当于需要Response，所以现在你必须经历所有的CORS环节。
最可能相关的：https://bugs.chromium.org/p/chromium/issues/detail?id=786507
我遇到了同样的问题，但我可以将图像用作背景图像，但不能用作遮罩图像。
这是同一个图像，cors仅在遮罩图像"属性"(Attribute)上阻止了它，而不是在背景图像"属性(Attribute)"上阻止它。
但更复杂的是，图片在同一个域上，但页面是其他人嵌入各种网站的iframe。
包含的线程中的问题不同。在那里，尽管公认的答案中提到了CORS，但问题与CORS无关。
本部分：
注意：根据W3C的建议，用于掩码的图像必须返回正确的CORS标头。
我不确定你是否可以让你试图使用的资源允许你在掩码图像中使用该图像。似乎对svg、canvas、mask之类的东西有一些安全限制。。。
这是相同的图像，但它具有访问控制允许原始标头，因此可以工作。
https://mdn.github.io/css-examples/masking/star.svg
尽管这个问题有很多术语，但主要原因归结为浏览器的安全功能，即用Origin检查Host是否愿意使用Cross Origin Resource Sharing。不仅是图像，任何资源(js, css, html...etc)，如果您试图从另一个来源访问，那么浏览器会从您获得基本文件的位置检查响应中的Acess-Control-Allow-Origins标头。只有在前面所述的标头具有您的域或通配符(*)时，才会将响应发送到您的web应用程序
如果您尝试使用不安全的Http Methods或Http Request Headers，问题会变得更加棘手。在此处了解哪些是安全请求。浏览器触发飞行前，服务器应发送有效响应，允许Access-Control-Request-Method中的方法和Access-Control-Request-Headers中的任何不安全标头。它们的响应等价物分别是Access-Control-Allow-Methods和Access-Control-Allow-Headers。
您的箱子，似乎没有飞行前，因为您正在打一个简单的GET电话。您唯一的选择是找到其他支持CORS策略的Host，或者在相同的服务器上下文下获取映像(在您的情况下为localhost:4200)。如果你想了解更多关于CORS的信息，这是一篇很好的文章。
这个问题可以通过安装这个chrome扩展来解决(假设您使用的是chrome)
https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf?hl=en
在添加该扩展之后，单击扩展图标=>单击"打开选项"页面=>选择访问控制请求头
如果您想了解有关此扩展的更多信息=>
https://mybrowseraddon.com/access-control-allow-origin.html
您可以尝试设置Angular代理。
1-在你的angular应用程序的根目录下创建一个文件proxy.conf.js，如下所示：
const PROXY_CONFIG = [
{
context: ["/files"],
target: "https://mdn.mozillademos.org",
secure: false,
logLevel: "error",
changeOrigin: true,
}
];
module.exports = PROXY_CONFIG;
2-对于项目中Angular.json中的Angular 12->您的项目名称->架构师->发球->配置->开发，添加"；proxyConfig"："proxy.conf.js"；
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "client:build:production"
},
"development": {
"browserTarget": "client:build:development",
"proxyConfig": "proxy.conf.js"
}
},
2之二：对于Angular<项目中angular.json中的12->您的项目名称->架构师->发球->选项，添加"；proxyConfig"："proxy.conf.js"；
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "yourprojectname:build",
"proxyConfig": "proxy.conf.js"
},
3-在你的代码中，设置
<div [ngStyle]="{'-webkit-mask-image': 'url(http://localhost:4200/files/12676/star.svg)'}">
yo! This text is contained within a <code>P</code> tag.
</div>