CDN域名预连接时如何通过Link头确认跨域资源加载
通过检查Link头中的crossorigin属性，可以确认服务器是否为跨域资源建立了独立的预连接通道。
检查Link头中的crossorigin属性与连接类型
服务器返回103状态码时，Link头中可能包含多个指向同一域名的预连接指令。解析Link头时，需要区分不带crossorigin属性和带crossorigin属性的指令。不带crossorigin的指令用于加载普通资源，如图片。带crossorigin属性的指令专门用于加载跨域资源，如字体文件。浏览器会根据这些属性决定是否建立独立的连接通道。
如果Link头中包含rel=preconnect; crossorigin，则表示服务器希望为跨域资源建立独立的连接。这种连接通常用于加载CORS保护的资源。例如，Link头中包含https://cdn.example.com; rel=preconnect; crossorigin，则表示需要建立跨域连接以加载CORS保护的资源。这种指令确保跨域资源不会占用普通资源的连接通道。
区分普通资源与CORS保护资源的连接需求
Link头中的crossorigin属性决定了预连接的用途。不带crossorigin的预连接用于加载普通资源，如图片。带crossorigin的预连接用于加载CORS保护的资源，如字体文件。CORS保护的资源必须通过独立的连接通道加载。如果Link头中包含两个指向同一域名的预连接指令，一个不带crossorigin，一个带crossorigin，则表示需要建立两个独立的连接通道。
如果Link头中只包含一个不带crossorigin的预连接指令，则表示只需要建立普通连接。如果Link头中只包含一个带crossorigin的预连接指令，则表示只需要建立跨域连接。如果Link头中包含两个预连接指令，则表示需要同时建立普通连接和跨域连接。这种区分可以确保跨域资源不会因为普通资源的连接而受到影响。
验证最终响应中的资源加载方式
在确认103状态码的Link头后，需要验证最终响应中的资源加载方式。最终响应中可能包含跨域字体文件和普通图片。如果Link头中指示预连接跨域资源，最终响应中也会包含跨域字体文件。浏览器会使用Link头中指示的跨域连接通道加载这些资源。如果Link头中指示预连接普通资源，最终响应中也会包含普通图片。浏览器会使用普通连接通道加载这些资源。
如果最终响应中的资源与Link头中的指示不一致，可能会导致资源加载失败。例如，Link头中指示预连接跨域资源，但最终响应中没有包含跨域字体文件。这种情况下，浏览器可能不会加载跨域资源。如果Link头中指示预连接普通资源，但最终响应中包含了跨域字体文件，浏览器可能无法正确加载跨域字体文件。因此，验证最终响应中的资源加载方式非常重要。
排查Link头配置错误的方法
如果服务器返回103状态码，但Link头配置错误，可能会导致跨域资源加载失败。排查时，可以检查Link头中的crossorigin属性是否正确。如果Link头中缺少crossorigin属性，但最终响应中包含跨域资源，浏览器可能无法正确加载跨域资源。此外，Link头中的URL应该是有效的，并且客户端可以访问。
还可以检查Link头中的rel属性是否正确。如果Link头中包含rel=preconnect; crossorigin，但最终响应中不包含跨域资源，则可能不需要跨域连接。如果Link头中包含rel=preconnect，但最终响应中包含跨域资源，则可能需要添加crossorigin属性。通过检查Link头的语法和属性，可以及时发现并修复配置错误，确保跨域资源能够正确加载。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。