Custom Elements 是 Web Components 技术的一部分，它允许在网页上创建自定义的 HTML 元素。它的一个重要特点是每个自定义元素都是一个独立的闭包，这意味着它们的 CSS 和 JavaScript 代码都是安全的。然而，如果你使用 Custom Elements 来加载远程资源，你可能会遇到一些跨域请求的问题。本文将介绍如何解决这些问题。
为什么会出现跨域请求的问题？
当一个页面在加载自定义元素时，浏览器会创建一个新的 HTML 解析器实例来处理这个元素。这个解析器实例与页面的主解析器实例是相互独立的。因此，如果一个自定义元素使用了远程的资源，这个资源请求就会被发送到远程服务器。如果这个服务器的响应没有包含足够的跨域资源共享（CORS）头信息，那么浏览器将会拒绝这个响应并且你将会看到一个跨域请求错误。
解决方法
在后台添加 CORS 头
最简单的方法是在你的后台应用程序中添加相应的 CORS 头信息。这样，无论是页面还是 Custom Elements，都可以加载来自远程服务器的资源。
以下是一个 Node.js 服务器的示例代码，它向每个响应添加了 CORS 头信息：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------- ---- ----- -- - ----------------------------------------- ----- ------------------------------------------ -------- ----------------- ------------- --------- ------- --- ------------ ----- ---- -- - --------------- -------- --- ---------------- -- -- - ------------------- ------- -- ---- ------- ---
上面的代码中，我们使用 res.header() 函数来添加了 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers 头信息，* 表示允许任何来源访问。
使用 iframe 加载资源
另一种方法是使用 iframe 元素来加载你的资源。这样可以避免跨域请求错误。下面是示例代码：
<custom-element> <iframe src="https://example.com/your-resource"></iframe> </custom-element>
上面的代码中，我们将我们需要加载的资源包含在一个 iframe 元素中，这样就不会导致跨域请求错误了。
请注意，这种方法需要你确保加载的资源是可信的，因为 iframe 会将它们作为独立的文档打开。这就意味着它们可以执行任何脚本和操作，并且可以访问父页面中的任何东西。
使用 JSONP 跨域请求
JSONP（JSON with padding）是一种旧的跨域技术，它通过添加一个 JavaScript 脚本来实现跨域请求。
下面是使用 jQuery 实现 JSONP 的示例代码：
$.ajax({
url: 'https://example.com/your-resource',
dataType: 'jsonp',
success: function(data) {
console.log(data);
}
});上面的代码中，我们将 dataType 设为 jsonp，这意味着 jQuery 将会自动在请求中添加一个回调函数参数。服务器端应该返回一个名为这个参数值的函数调用，这个函数将使用服务器端返回的 JSON 数据作为参数。
请注意，JSONP 跨域请求不能发送 POST 请求，因为它只能使用 GET 请求。此外，如果你使用 JSONP 跨域请求加载一个包含敏感信息的资源，这个信息将会成为公共的。
结论
Custom Elements 是一个非常有用的技术，它可以帮助开发者创建自定义的 HTML 元素并增强网站的功能。但是，在处理跨域请求方面需要小心。你可以在后台添加 CORS 头信息、使用 iframe 元素或者使用 JSONP 来跨域请求。但是请记住，一定要确保数据是安全的，因为这些方法都可以被滥用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67760e1a6d66e0f9aa097253