首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

通过ajax从CDN加载图片导致https跨域读阻塞

是因为浏览器的同源策略限制了跨域资源的访问。同源策略要求网页只能访问与其来源相同的资源,而CDN上的图片往往不属于同一个域名,因此会被浏览器拦截。

为了解决这个问题,可以采用以下几种方法:

  1. 使用CORS(跨域资源共享):CDN服务器需要在响应头中添加Access-Control-Allow-Origin字段,允许指定的域名访问资源。前端代码中使用XMLHttpRequest对象发送请求时,需要设置withCredentials为true,以便携带跨域请求的凭证信息。
  2. 代理服务器:在自己的服务器上设置一个代理,将CDN上的图片请求发送到代理服务器上,然后再由代理服务器返回给前端。这样前端请求的是同源的资源,就不会受到同源策略的限制。
  3. JSONP(JSON with Padding):如果CDN服务器支持JSONP,可以通过动态创建<script>标签来加载图片资源。JSONP利用<script>标签的src属性不受同源策略限制的特性,将CDN上的图片资源作为回调函数的参数返回给前端。
  4. 使用反向代理:将CDN上的图片资源通过反向代理服务器转发到自己的域名下,这样前端请求的就是同源的资源,不会受到同源策略的限制。

需要注意的是,以上方法都需要在服务器端进行配置或处理,前端代码也需要相应的调整。具体选择哪种方法取决于实际情况和需求。

腾讯云相关产品推荐:

  • CDN(内容分发网络):提供全球加速、高可用、低成本的静态和动态加速服务,可用于加速图片、视频等静态资源的分发。 产品介绍链接:https://cloud.tencent.com/product/cdn
  • COS(对象存储):提供安全、稳定、低成本的云端存储服务,可用于存储和分发静态资源。 产品介绍链接:https://cloud.tencent.com/product/cos
  • SCF(云函数):无服务器计算服务,可用于处理前端请求并进行相应的跨域处理。 产品介绍链接:https://cloud.tencent.com/product/scf

以上是腾讯云提供的一些相关产品,可以根据具体需求选择适合的产品来解决跨域读阻塞的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端性能优化——桌面浏览器前端优化策略

11.使用可缓存的AJAX 对于返回内容相同的请求,没必要每次都直接服务端拉取,合理使用AJAX缓存能加快AJAX响应速度并减轻服务器压力。...对于静态资源,尽量使用不同的域名来存放,因为Cookie默认是不能的,这样就做到了不同域名下静态资源请求的Cookie隔离。...17.避免使用CSS import引用加载CSS CSS中的@import可以另一个样式文件中引入样式,但应该避免这种用法,因为这样会增加CSS资源加载的关键路径长度,带有@import的CSS样式需要在...由于JavaScript资源默认是解析阻塞的,除非被标记为异步或者通过其他的异步方式加载,否则会阻塞HTML DOM解析和CSS渲染的过程。...3.不要在HTML中直接缩放图片 在HTML中直接缩放图片导致页面内容的重排重绘,此时可能会使页面中的其他操作产生卡顿,因此要尽量减少在页面中直接进行图片缩放。

1.6K60

桌面端前端性能优化策略

网络加载类 减少 HTTP 资源请求次数 合并静态资源图片、JavaScript 或 CSS 代码,减少页面请求数和资源请求消耗 避免重复的资源,防止增加多余请求 减小 HTTP 请求大小 减少没必要的图片...script src="//cdn.domain.com/path/a.js,b.js,c.js"> 使用可缓存的 AJAX 可以返回内容相同的请求,没必要每次都直接服务器端拉取,合理使用...请求通常默认带上浏览器的 Cookie 一起发送给服务器,所以在非必要的情况下,要尽量减少 Cookie 来减小 HTTP 请求的大小 对应静态资源,尽量使用不同的域名来存放,因为 Cookie 默认不能的...引用加载 CSS CSS 中的 @import 可以另一个样式文件引入样式,但应该避免这种用法,因为这样会增加 CSS 资源加载的关键路径长度,带有 @import 的 CSS 样式需要在 CSS...,这是因为 JavaScript 资源默认是解析阻塞的,除非被标记为异步或者通过其他的异步方式加载 不要在 HTML 中直接缩放图片 在 HTML 中直接缩放图片导致页面的重排重绘,此时可能会使页面中的其他操作产生卡顿

2K20
  • 对象存储COSCORS问题小结

    由于img标签是可以直接进行访问的,在请求 COS 前,img标签加载了同样的图片,因为img加载在前,等到访问 COS 中的资源的时候,浏览器直接使用了缓存,缓存中是没有头的,导致失败。...设置 标签的 crossorigin 属性的值为 anonymous,强制图片每次请求都使用 XHR 的 CORS 请求。 AJAX 请求图片的时候加上随机参数。...访问CDN域名,CDN回源到COS 如果只在COS侧配置了,但是没有在CDN配置的话,由于CDN会缓存住第一次访问的请求,第一次请求没有的话CDN会缓存住这个头部,可能会导致后面的请求失败了...还有一种场景是一个COS域名对应多个CDN域名时,也是由于CDN的缓存问题,可能会导致各个CDN域名表现不一致,这种场景也建议在CDN配置头部。...设置 标签的 crossorigin 属性的值为 anonymous,强制图片每次请求都使用 XHR 的 CORS 请求。 AJAX 请求图片的时候加上随机参数。

    8.9K1411

    前端渲染优化有哪些?

    , 而浏览器对相同的连接有限制,所以会影响页面的并 行加载 使用 iframe 之前需要考虑这两个缺点 。...如果需要使用 iframe , 最好是通过 javascript动态给 iframe 添加 src 属性值, 这样可 绕开以上两个问题 禁止使用 gif 图片实现 loading 效果...但不建议大图使用, 大图比较耗费 CPU 小图标优势在于: 减少 HTTP 请求 , 避免文件 修改及时生效 页面头部的 会阻塞页面;( 因为 Renderer 进程中 JS 线程和渲染线程是互斥的) 页面中空的 href 和 src 会阻塞页面其他资源的加载 (阻塞下载进程) 网页 gzip ,...CDN 托管, data 缓存 , 图片服务器 前端模板 JS+数据,减少由于 HTML 标签导致的带宽浪费, 前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数 用 innerHTML

    8910

    【实战】1886- 教你怎么前端实现埋点上报

    因此使用ajax这类请求并不是万全之策。 基于img的埋点上报 上面可以看到如果使用ajax的话,会存在的问题。而且数据上报前端主要是负责将数据传递到后端,并不过分强调前后端交互。...因此我们可以通过一些支持的标签去实现数据上报功能。 script,link,img就是我们上报的数据的最好对象 先说结论,这里推荐使用img标签去实现。...基于img做埋点上报 通常使用img标签去做埋点上报,img标签加载并不需要挂载到页面上,基于js去new image(),设置其src之后就可以直接请求图片。...img兼容性好 无需挂载到页面上,反复操作dom img的加载不会阻塞html的解析,但img加载后并不渲染,它需要等待Render Tree生成完后才和Render Tree一起渲染出来 注:通常埋点上报会使用...对于ajax在页面卸载时上报,ajax有可能没上报完,页面就卸载了导致请求中断,因此ajax处理这种情况时必须作为同步操作. sendBeacon是异步的,不会影响当前页到下一个页面的跳转速度,且不受同限制

    52210

    资源文件的动态加载

    实现动态加载JS的方式: iframe document.write head.appendChild(script)  可 xhr请求,然后eval xhr注入 逐个分析: 1、document.write...Ajax 方式获取代码,并通过 eval 方式执行代码。...XHR Injection 通过 Ajax 方式获取代码,并在页面上创建一个 script 元素,将 Ajax 取得的代码注入。 Script in Iframe 通过 iframe 加载 js。...各种方式各有优缺点,比如能否、是否会阻塞其它资源的下载(能否并行下载)、能否管理控制执行顺序、耗费的资源、是否兼容各大浏览器等(部分方法的特性可参考这儿)。...Script DOM Element 这是最常用的方式,它的优点很多:可以、可以加载任何格式的外部 js(不需要对外部 js 进行重构)、不会阻塞其它资源的下载、实现简单。

    2.3K90

    缓存竟也能导致问题?

    : * access-control-max-age: 600 打开页面图片能正常显示,但是下载(ajax请求图片)会因为报错: Access to XMLHttpRequest at '' from...而此时阿里工单也回复了: 描述情况基本一样 原因分析 什么是及CORS配置此处不再详述 1、图片存储使用的阿里云OSS,提供默认的域名可以访问图片,只需要OSS设置配置即可 2、使用了CDN,...而CDN也同样需要配置(没有配置) 3、页面直接img显示的图片,而img并不会触发,所以当页面打开后img会请求到CDN图片并缓存到本地,而缓存不带CORS配置,然后ajax请求直接访问本地图片...,触发了同源限制,导致报错 解决方法 1、直接使用默认的非CDN地址下载,url = url.replace('file.xxx.com', 'xxx.oss-cn-beijing.aliyuncs.com...s=' + Math.random().toString() 3、配置CDN的CORS,使其直接返回配置 来源:www.yuque.com/zhanghaofei/blog/vqc5g6 - END

    3.6K10

    桌面浏览器前端优化策略

    使用静态资源分存放来增加下载并行数 浏览器在同一时间向同一个域名请求文件的并行下载数量是有限的,因此可以利用多个域名的主机来存放不同的静态资源,增大页面加载时资源的并行下载数,缩短页面资源加载的时间。...使用CND Combo 下载传输内容 CDN Combo是在CDN服务器端将多个文件请求打包成一个文件的形式来返回的技术,这样可以实现HTTP连续传输的一次性复用,减少浏览器的HTTP请求数,加快资源下载速度...对于静态资源,尽量使用不同的域名来存放,因为Cookie默认是不能够的,这样就做到了不同域名下静态资源请求的Cookie隔壁。...推荐使用异步加载javascript资源 异步加载Javascript资源不会阻塞文档解析,所以允许在浏览器中有限渲染页面,延时加载脚本。...不要在HTML中直接缩放图片 在HTML中直接缩放图片导致页面内容的重排重绘,此时可能会使页面中其他的操作产生卡顿。

    1.1K20

    脚本化HTTP 取得响应 指定请求

    脚本化HTTP 下面将会用js代码操纵HTTP 下面将会说明在没有导致web浏览器重新加载任何窗口或者窗体的情况下,脚本实现web浏览器和服务器之间的通信。...即这种的可以不受到同源的限制 ajax中的x ajax中的x为xml为一种可选的通信方式,也可以使用JSON完成通信。...发送请求 由于get请求不包括主体,则直接send方法即可完成一个包的发送, 由于限制导致不能读取 在http://1.197.156.53/编写js如下 // 编写请求头GET并完成发送 var...同步响应 由于其下载的问题,一般异步处理HTTP响应,但是同步也可以,不过由于客户端js为单线程的,当send()方法阻塞以后,将会导致浏览器的ui被冻结,如果连接的服务器过慢,将会导致用户的操作出现问题...,只能读取同源的数据,通过script脚本操纵HTTP脚本并实现加载并执行脚本 script 元素能发起的HTTP请求 能使用request.overrideMimeType能够实现对MIME类型的更改

    1.4K40

    长期维护更新,前端面试题

    CDN 允许您的网站访问者最近的服务器加载数据。如果您使用 CDN,您网站内的文件将自动压缩,以便在全球范围内快速分发。...- Cookie、LocalStorage 和 IndexDB 无法读取 - DOM 和 Js对象无法获得 - AJAX 请求不能发送解决方案 - 通过jsonp - document.domain...+ iframe - location.hash + iframe - window.name + iframe - postMessage - 资源共享(CORS) - nginx代理...是左向右执行,一旦碰到await直接跳出,阻塞 async2() 的执行? 还是右向左,先执行async2后,发现有await关键字,于是让出线程,阻塞代码呢? 实践的结论是,右向左的。...懒加载也就是延迟加载 原理: 页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。

    2.4K41

    前端安全配置xss预防针Content-Security-Policy(csp)配置详解

    通过CSP所约束的的规责指定可信的内容来源(这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源)。通过CSP协定,让WEB处于一个安全的运行环境中。...,那有没有一种方法既可以让我们可以获取资源,又能防止恶意代码呢?...答案是当然有了,这就是csp,通过csp我们可以制定一系列的策略,从而只允许我们页面向我们允许的域名发起请求,而不符合我们策略的恶意攻击则被挡在门外.从而实现需要说明的一点是,目前主流的浏览器都已支持...*.example.com允许 example.com下的任意子域名加载资源https://cdn.comimg-src https://cdn.com仅仅允许通过https协议来指定域名下加载资源...https:img-src https:只允许通过https协议加载资源'unsafe-inline'script-src 'unsafe-inline'允许行内代码执行'unsafe-eval'script-src

    8.8K10

    前端知识体系整理(不断更新)

    ,参数暴露到url,(服务器端可能对)url长度有限制 POST:更多的用于写操作 HTTP状态码 XHR2 问题 的形成(同源限制):主、子、ip和域名、协议不同、端口不同 常用解决方案...url中暴露传递的内容 iframe+window.name:使用iframe的window.name外域传递数据到本地域,适合各种场景下且数据安全 缺点是数据有大小限制 postMessage...通讯 jQuery 可阅读yuanyan同学的jQuery编程实践 安全问题 XSS CSRF SQL注入 敏感信息采用安全传输(SSL/HTTPS) 上传限制(大小、mime类型、可执行文件) (...CSS优化 避免css表达式:css表达式会不断的重复计算,导致页面性能下降 避免AlphaImageLoader滤镜:这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器(引自【高性能前端...css = 'width: 100px; height: 50px; left: 200px;'; box.style.cssText += css; 使用事件委托:充分利用冒泡机制,减少事件绑定 无阻塞加载

    1.6K20

    2021大厂(阿里、百度、字体跳动、腾讯)前端面试题库

    14.如何让事件先冒泡后捕获 15.说一下事件代理 1.什么是 2.同源策略 3.为什么有同源策略 4.的解决方案 5.jsonp原理 6.常见的场景 7.postMessage...8.资源共享(CORS) 9.nginx代理 10.nodejs中间件代理 11.webscoket协议 HTTP 1.什么是域名发散和域名收敛?...4.异步加载? 5.加载方式区别? 6.浏览器缓存? 7.预加载? 8.预渲染? 9.CDN? 10.DNS 预解析? 11.节流? 12.防抖? 13.懒执行? 14.图片优化?...15.图片加载优化? 16.js css 顺序对前端优化影响? 17.重排重绘为什么会影响渲染,如何避免? 18.何时缓存在memory,合适缓存在dist?...4.使用CDN加载 jQuery库的主要优势是什么? 5.jQuery中的方法链是什么?使用方法链有什么好处? 6.如何将一个HTML元素添加到DOM树中的?

    1.8K20

    前端技术提高页面加载速度

    通常,浏览器只能(同一个)下载不超过两个并行对象,如果一个对象是一段 JavaScript 代码,那么在该脚本下载完之前,其他页面组件的下载将会暂停。...此外,大多数 CDN 都在快速服务器上运行,因此无论服务器的加载速度如何,其响应速度都比小型的超载服务器快。 十八、对资产使用多个来增加连接 CDN 的另一个优势是它们是独立的。...然而,您的浏览器能够打开新线程或到其他的连接,这样,另一个加载的任何资产都可以与其他所有资产同时加载。...通过这种方式,客户机只需等待一次(获取传入的数据),但是在此之后(当浏览器与服务器之间没有必要通信时),处理速度将更快。当然,还有大量 Ajax 优化技术,本教程无法一一列出。...直至工具列完全加载后,才转成编辑状态。 外部JS会阻塞所有内容的呈现 嵌入式的JS会阻止其后内容的显示 当CSS后面跟着嵌入的JS的时候,该CSS就会出现阻塞后面资源下载的情况

    3.6K20

    如何进行渗透测试XSS站攻击检测

    Flash/SilverLight 浏览器的各种插件也存在需求。通常是通过在服务器配置crossdomain.xml,设置本服务允许哪些域名的访问。...embedding) 通常不允许操作(Cross-origin reads) 可能嵌入源的资源的一些示例有: 标签嵌入脚本。...CORS CORS是一个W3C标准,全称是”资源共享”(Cross-origin resource sharing)。通过这个标准,可以允许浏览器读取的资源。 3.2.2.4.1....e.g. img-src domain.example.com 只可以特定的加载资源 \*.example.com e.g. img-src \*.example.com 可以任意域名.com的子加载资源...https://cdn.com e.g. img-src https://域名.com 只能从给定的https加载资源 https: e.g. img-src https: 只能从任意https

    2.7K30

    这么多前端优化点你都记得住吗?

    11.使用可缓存的 AJAX 对于返回内容相同的请求,没必要每次都直接服务端拉取,合理使用 AJAX 缓存能加快 AJAX 响应速度并减轻服务器压力。...对于静态资源,尽量使用不同的域名来存放,因为 Cookie 默认是不能的,这样就做到了不同域名下静态资源请求的 Cookie 隔离。...由于 JavaScript 资源默认是解析阻塞的,除非被标记为异步或者通过其他的异步方式加载,否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。...3.尽量预先设定图片等大小 在加载大量的图片元素时,尽量预先限定图片的尺寸大小,否则在图片加载过程中会更新图片的排版信息,产生大量的重排 4.不要在 HTML 中直接缩放图片 在 HTML 中直接缩放图片导致页面内容的重排重绘...7.定义图片大小限制 加载的单张图片一般建议不超过 30KB,避免大图片加载时间长而阻塞页面其他资源的下载,因此推荐在 10KB 以内。

    1.7K51
    领券