缓存竟也能导致跨域问题!

时间: 2019-11-02阅读: 51标签: 跨域

业务背景

由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如图:



问题现象

图片存储再阿里云OSS,阿里云OSS的CORS设置的跨域并没有问题:

access-control-allow-methods: GET, POST, PUT, DELETE, HEAD
access-control-allow-origin: *
access-control-max-age: 600

打开页面图片能正常显示,但是下载(ajax请求图片)会因为跨域报错:

Access to XMLHttpRequest at '' from origin 'http://192.168.13.133:8888' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  1. 同页面其他外站图片链接就可以正常使用,只有自己OSS的图片有问题
  2. 多次尝试发现network控制台禁用缓存情况下是没有问题的
  3. 禁用缓存下载图片后,再启用缓存,此时下载又没有问题了
  4. 即使强制刷新也仍然下载不了,network显示读取自本地缓存

基本可以猜测是缓存或者使用CDN的问题。

 

原因分析

什么是跨域及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')替换域名等方式
  2. 防止使用缓存,ajax请求图片是加上随机参数,url = url + '?s=' + Math.random().toString()
  3. 配置CDN的CORS,使其直接返回跨域配置


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/6455

js跨域访问问题

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。如果进行跨域访问

你应该了解的CORS

如果你和我一样,第一次遇到 CORS (跨域资源共享),你想让服务器接收那些你拼接的 Ajax 请求并处理他们。所以你去 stackoverflow.com 复制一段代码来设置一些 HTTP Headers ,让请求可以正常工作

reactjs中配置代理跨域

第一步,下载依赖 http-proxy-middleware;第二步,在src下建立setupProxy.js;第三步,在数据请求中直接请求,在真实url后添加/api即可,eg

nginx 反向代理处理跨域问题

正向代理是你发出请求的时候先经过代理服务器,所以实际上发出请求的是代理服务器。反向代理是“代理你的目标服务器”,请求目标服务器的代理,做一些处理后再真正请求。在这篇文章里,反向代理用于处理跨域问题。

vue项目打包后怎样优雅的解决跨域

在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头

vue-cli3 中跨域解决方案

此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批),前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器。

如何用Nginx解决前端跨域问题?

在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security。

CORS跨域请求

浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:DOM同源策略、XmlHttpRequest同源策略。只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

JSONP技术栈_jsonp的使用

JSONP方案:前端提供 API 的方法,其实解耦还没有解的很干净,我们在设置script的src时直接给它传参,后端插入这个参数这就可以了。因为JSONP是通过动态创建Script实现的,动态创建Script只有GET请求没有POST请求

jsonp跨域原理,jsonp和ajax的区别?

Jsonp原理是动态创建一个script标签,利用script标签src属性访问没有限制,实现跨域。Ajax是页面无刷新请求数据操作,Jsonp不是真正的ajax请求。讲解Ajax 和 jsonp的区别,在jquery中使用jsonp

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全