在使用CSS的mask属性引入本地图片实现遮罩效果时，经常会遇到跨域相关的报错，导致遮罩无法正常渲染。这个问题本质是因为浏览器的同源策略限制了非同源资源的加载，本地图片如果不符合同源规则就会被拦截。
mask引入本地图片跨域的原因
浏览器的同源策略要求资源请求的协议、域名、端口都保持一致，否则就会判定为跨域请求。当我们在本地开发时，如果直接通过文件路径访问本地图片，或者使用不同的本地服务端口加载图片，就会触发跨域限制，mask属性在加载这类图片时就会报错。
常见的解决方法
方法一：将图片转为base64格式
把本地图片转换为base64编码的字符串，直接嵌入到CSS中，这样就不会产生跨域请求，是最直接的解决方式。可以使用在线工具或者代码脚本完成转换。
/* 将本地图片转为base64后直接写入mask属性 */
.box {
width: 200px;
height: 200px;
background: #ff0000;
/* base64格式的图片不需要跨域请求 */
mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==) no-repeat center / contain;
}
方法二：配置本地开发服务器
如果是本地开发环境，可以启动一个本地服务器来托管图片资源，保证图片和页面属于同源。比如使用Node.js的express框架配置静态资源服务，或者使用vscode的live server插件启动服务。
以express为例，配置静态资源目录的代码如下：
const express = require('express');
const app = express();
// 将public目录设为静态资源目录，图片放在该目录下即可同源访问
app.use(express.static('public'));
app.listen(3000, () => {
console.log('本地服务启动在3000端口');
});
之后在CSS中引入图片时，使用相对路径或者同源的绝对路径即可：
.box {
width: 200px;
height: 200px;
background: #00ff00;
/* 图片放在public目录下，和页面同源，不会跨域 */
mask: url(/mask-image.png) no-repeat center / contain;
}
方法三：设置图片服务器的跨域响应头
如果图片是放在独立的图片服务器上，可以在服务器端设置CORS响应头，允许对应的页面域名访问该图片资源。比如Nginx配置中添加如下规则：
location /images/ {
# 允许所有域名访问，也可以指定具体的域名
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
不同场景的选择建议
如果是小的图标类图片，优先选择base64转换的方式，减少请求次数；如果是本地开发调试，使用本地服务器的方式最便捷；如果是生产环境的独立图片服务，配置CORS响应头是更合适的方案。另外要注意，mask属性使用的图片格式需要浏览器支持，优先选择png、svg等格式。
注意事项
- base64格式的图片会增加CSS文件的体积，不适合大尺寸图片使用
- 本地服务器配置时要确保端口和页面访问的端口一致，避免端口不同导致的跨域
- CORS响应头设置时，尽量不要使用通配符*，指定具体的可信域名更安全