记本地缓存引起的canvers跨域

于 2022-01-17 15:48:11 发布
阅读量516 收藏
点赞数 1
文章标签： 缓存 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42786389/article/details/122541197
版权

问题前提

***：
已经上传过图片，编辑页编辑图片大小透明度进行图片整合时，报跨域问题
在这里插入图片描述
1.服务端改了，但是没解决问题
2.img属性下面也设置了允许跨域,也不行

img.crossOrigin:'anonymous'

3.后来查到是缓存问题：第一次加载的时候 浏览器会缓存下来图片，于是乎又加载的时候浏览器发现他缓存的有这个地址，但是缓存的地址与当前域名地址不一样，出于安全考虑，即便是服务端设置允许跨域也没有办法

问题解决

在url后面拼一个时间戳，每次请求的地址都不一样，绕过浏览器缓存

const tamp = new Date()
imgs.src = imgSrc地址+'?’+tamp

总结

还是经验太少，解决问题思路太窄，加油同学们🥲

我心中的妖怪长大了
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nodejs搭建本地服务器轻松解决跨域问题
10-18
在本文中，我们将深入探讨如何使用Node.js搭建本地服务器来轻松解决跨域问题。跨域问题通常发生在浏览器的安全策略之下，限制了JavaScript从一个源（协议+域名+端口）发送Ajax请求到另一个源。然而，开发过程中经常...
extjs_02_grid显示本地数据、显示跨域数据
10-25
主要介绍了extjs_02_grid显示本地数据、显示跨域数据的具体实现,需要的朋友可以参考下
缓存竟也能导致跨域问题！
心雨先生
11-11 1671
业务背景 由于页面设计需要，页面展示图片，并可点击下载按钮进行下载（需要前端打包多个图片，所以需要使用ajax请求图片获得二进制内容，不能直接使用img或a进行下载），如图： 问题现象 图片存储再阿里云OSS，阿里云OSS的CORS设置的跨域并没有问题： 1access-control-allow-methods: GET, POST, PUT, DELETE, HEAD 2a...
浏览器的本地存储方案及跨域
weixin_33817333的博客
12-08 1155
2019独角兽企业重金招聘Python工程师标准>>> ...
缓存竟也能导致跨域问题？
Java技术栈，分享最主流的Java技术
11-10 469
由于页面设计需要，页面展示图片，并可点击下载按钮进行下载（需要前端打包多个图片，所以需要使用ajax请求图片获得二进制内容，不能直接使用img或a进行下载），如图：问题现象图片存储再阿里云OSS，阿里云OSS的CORS设置的跨域并没有问题：access-control-allow-methods: GET, POST, PUT, DELETE, HEADaccess-control-allow-o...
Unity中UI组件
Oct_Nana的博客
05-19 3008
一、Canvers（画布组件），Canvers下面是添加Button和Image组件 Rect Transform 1.Position：坐标位置 2.Width/Height 高宽尺寸 3.Anchors 锚点： 4.Pivot中心点：即UI的旋转中心点，默认为UI的几何中心，但是可以调整 5.Rotation角度 6.Scale缩放比例 二、Image组件(图像组件，用于显示图像)** 1.Texture Type:(一般为图片类型),一般是选择sprite(2D and UI)，之后点击Apply
Canvas 详细教程(一)
qq_41974199的博客
06-29 1045
Canvas 教程 文章目录Canvas 教程1：基本用法2：获取 Canvas DOM 对象3：绘制矩形4：绘制路径5：圆弧 1：基本用法 <canvas id="canvas"></canvas> 初始化宽度：300 初始化高度：150 canvas起初是空白的，我们可以添加边框并查看。 <style> canvas{ border:1px solid black; } </style> 2：获取 Canvas DOM 对象 var canv
详解nginx代理天地图做缓存解决跨域问题
01-10
作为一个GISer开发者，天地图是经常在项目中以底图的形式出现，其加载地址如： 1.天地图矢量：... 其中t{0-6}是天地图提供的7个服务器名称t0,t1,t2…. 下面是我以openl
利用jsonp解决js读取本地json跨域的问题
10-17
标题中的“利用jsonp解决js读取本地json跨域的问题”是指在JavaScript中，由于同源策略的限制，AJAX无法直接从本地文件系统获取JSON数据。然而，JSONP（JSON with Padding）是一种绕过同源策略的技术，尤其适用于GET...
记一次vue跨域的解决
01-18
其实故事背景是前端的同学跟我说他们前端请求不了我后端的数据，说是跨域了。 其实跨域的问题，在如今前后端的时代非常常见，如果图方便的话，一般是在后端的请求以及拦截器中设置header，但是有一些业务需求单纯...
canvers报告
12-15
的v广东佛山v第三vs的vsDV 地方v广东佛山v第三v供热女人味
浏览器缓存导致canvas image跨域
AhCola
05-15 1258
谷歌浏览器缓存导致跨域，造成tainted canvas错误 文章同时发布于：王鹏飞的个人网站。 最近工作中遇到了一个canvas绘制image的错误。是由于canvas在使用其他源的图片的时候，造成跨域导致，遇到这种问题一般我们只需要将图片的crossorigin设置下，然后请求响应头也需要设置access-control-allow-origin，即可解决问题。但是我遇到的问题比这要复杂一些，因为在前端和服务端都设置好的情况下，我的问题依然存在，依然报跨域。接下来我将详细解释相关内容。 一. 同源限制
html5canvers中的按钮
milijiangjun的博客
08-15 1198
var rect={x:100,y:100,w:40,h:20};//定义要画的矩形的位置属性 var canvas=document.getElementById('canvas'); var cxt=canvas.getContext('2d'); cxt.fillRect(rect.x,rect.y,rect.w,rect.h);//绘制矩形 canvas.onclick=funct
学习HTML5 Canvas这一篇文章就够了
热门推荐
完善飞跃
06-16 16万+
一、canvas简介&amp;amp;lt;canvas&amp;amp;gt; 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。它最初由苹果内部使用自己MacOS X WebKit推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。 后来，有人通过Gecko内核的浏览器 (尤其是Mo
nc 扩展开发-前端扩展
siyi1219的博客
10-29 684
读取.nc文件的气象数据用前端html和js，canvers展现在百度地图上，形成动态热力图。
u010782109的博客
09-16 2284
步骤一：将气象数据处理.nc文件转换为txt文件。 步骤二：用js代码读取txt文件中的参数和数据。 步骤三：画出canvers动态热力图效果。 步骤四：把canvers加载到百度地图上。 步骤五：动态选择参数。 步骤六：封装js文件。 <head> <meta charset="UTF-8"> <title></title> <style> body, html, #container { overflow: hid
vue本地跨域和服务器跨域
最新发布
08-13
对于vue项目的本地跨域和服务器跨域，可以通过配置vue.config.js文件来实现。在vue.config.js文件中，devServer配置项用于配置项目的开发服务器。可以通过设置proxy来实现跨域请求。 在devServer的proxy配置中，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值