解决阿里云OSS跨域问题

解决阿里云OSS跨域问题

现象

本人项目中对阿里云图片请求进行了两次,第一次通过img标签进行,第二次通过异步加载获取。第一次请求到图片,浏览器会进行缓存,随后再进行异步请求,保存跨域失效。
错误信息如下:
Failed to load http://cdn.imayuan.com/831ccd4741a7a56d85f6698a21f4ca69.svg: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8601' is therefore not allowed access.

解决

  1. 通过http请求状态码判断第二次异步加载是使用的缓存,状态码是200(from cache) 。附:跟缓存有关的http状态码有:
    • 200 OK (from cache) 是浏览器没有跟服务器确认,直接用了浏览器缓存
    • 304 Not Modified 是浏览器和服务器多确认了一次缓存有效性,再用的缓存
  2. 随后多次尝试清理缓存无效,后来发现原因是通过img标签请求始终在异步请求前面,故尝试在所有img标签加载完成后清理缓存,则不会出现跨域问题。
  3. 发现问题出来img标签上面,服务端做了对跨域的配置后,响应里面应该有Access-Control-Allow-Origin的配置,但是通过抓取请求发现没有。
  4. 结论阿里云oss的img标签需要手动配置跨域。
    <img crossOrigin="anonymous"/>

crossorigin属性:
anonymous:如果使用这个值的话就会在请求中的header中的带上Origin属性,但请求不会带上cookie和其他的一些认证信息。
use-credentials:这个就同时会在跨域请求中带上cookie和其他的一些认证信息。
在使用这两个值时都需要server端在response的header中带上Access-Control-Allow-Credentials属性。

转载于:https://www.cnblogs.com/wwyz/p/9210856.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368415.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css之hover改变子元素和其他元素样式

参考地址&#xff1a;链接 表示下一级元素&#xff0c;>表示子元素 1 <!DOCTYPE html>2 <html>3 <head lang"en">4 <meta charset"UTF-8">5 <title></title>6 </head>7 8 <style>9 #a {co…

将JacpFX客户端与JSR 356 WebSockets一起使用

JSR 356 WebSockets是即将发布的JEE 7版本中令人兴奋的新功能之一&#xff0c;并且在其参考实现中包括Server-和Client API。 这使其非常适合在客户端与JavaFX集成。 JacpFX是JavaFX之上的RCP框架&#xff0c;它使用基于消息的方法与组件进行交互。 这种基于消息的方法使集成We…

nagios check_mysql uptime_nagios使用check_mysql监控mysql

如果没有check_mysql插件&#xff0c;需要安装Mysql数据库1、建立专用数据库&#xff1a; [rootsvr3 ~]#mysql -u root -pEnter password:Welcome to the MySQL monitor. Commands end with ; or \g.Your MySQL connection id is 51910Server version: 5.5.3-m3-log Source di…

《精通Spring4.X企业应用开发实战》读后感第七章(AOP概念)

转载于:https://www.cnblogs.com/Michael2397/p/8068486.html

XHTML与HTML的区别

XHTML的语法较为严谨&#xff0c;拥有一定的规则&#xff0c;如果不遵循规则的话容易出错。但也不必太过担心&#xff0c;因为XHTML的规则并不太难&#xff0c;它和HTML4.01标准没有太多的不同。 需要注意的是以下几点&#xff1a; 1.XHTML标签必须被正确的关闭&#xff0c;即…

EC2上的ElasticSearch不到60秒

好奇地看到所有ElasticSearch轮奸是关于什么的&#xff1f; 想在没有大量肘部油脂的情况下看到它吗&#xff1f; 然后&#xff0c;朋友&#xff0c; 别再犹豫了-不到60秒&#xff0c;我将向您展示如何在AWS AMI上安装ElasticSearch 。 您首先需要一个AWS账户以及一个SSH密钥对…

Material使用04 MdCardModule和MdButtonModule综合运用

设计需求&#xff1a;设计一个登陆页面 1 模块导入 1.1 将MdCardModule和MdButtonModule模块导入到共享模块中 import { NgModule } from angular/core; import { CommonModule } from angular/common; import { MdSidenavModule, MdToolbarModule,MdIconModule,MdButtonModule…

mysql子分区多少层_MYSQL子分区修剪

我有一个MYSQL表与分区的年份和子分区的月份。MYSQL子分区修剪CREATE TABLE ptable (id INT NOT NULL AUTO_INCREMENT,name varchar(100),purchased DATETIME NOT NULL,PRIMARY KEY (id, purchased))PARTITION BY RANGE(YEAR(purchased))SUBPARTITION BY HASH(MONTH(purchased)…

65. Valid Number

Validate if a given string is numeric. Some examples:"0" > true" 0.1 " > true"abc" > false"1 a" > false"2e10" > true 判断字符串是否代表了有效数字。 这道题有点坑&#xff0c;情况比较多…… 1 cl…

python实现bp神经网络对csv文件进行数据预测

参考资源&#xff1a; sklearn库 bp神经网络[从原理到代码一篇搞定]&#xff08;2&#xff09;_sklearn 神经网络-CSDN博客 十分钟上手sklearn&#xff1a;安装&#xff0c;获取数据&#xff0c;数据预处理 - 知乎 (zhihu.com) 一个实例讲解如何使用BP神经网络(附代码) - 知…

html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切

众所周知&#xff0c;一般的屏蔽的方法是用JS来编写的脚本&#xff0c;但是也可以直接通过修改网页属性的方法来屏蔽右键 禁止复制。 禁止右键 οncοntextmenu"return false" 禁止复制和剪切&#xff1a; οncοpy"return false;" oncut"return fa…

Spring MVC:表单处理卷。 4 –单选按钮

在软件开发领域&#xff0c;单选按钮是图形用户界面的重要组成部分。 Spring MVC标签库为此表单元素提供了特殊标签。 更确切地说&#xff0c;有两个标签用于此目的&#xff1a;单选按钮&#xff0c;单选按钮。 两者对于特定任务都是有用的。 如您所知&#xff0c;我将在帖子中…

点击时候确定某个元素 js_某空气质量监测平台 JS反爬

目标&#xff1a;中国空气质量在线监测分析平台|城市分析 参考CSDN中文章&#xff0c;记录一下学习过程通过切换城市&#xff0c;页面数据是通过 Ajax 加载的&#xff0c;数据接口&#xff1a;https://www.aqistudy.cn/apinew/aqistudyapi.php请求的POST Data、返回的数据都被加…

HTML 部分常用属性、组成属性|...超链接、路径、锚点、列表、滚动、URL编码、表格、表单、GET和POST

URL地址 就是我们所说的网址&#xff1a;www.jd.com 浏览器内核&#xff0c;渲染引擎 Ie内核&#xff1a;triteent 谷歌/欧鹏&#xff1a;blink 火狐&#xff1a;gecko 苹果&#xff1a;webkit 渲染引擎是出现兼容性的根本问题 -html概念:hyper Text Markup Languag…

Spring @Value取值为null或@Autowired注入失败

Value 用于注入.properties文件中定义的内容 Autowired 用于装配bean 用法都很简单&#xff0c;很直接&#xff0c;但是稍不注意就会出错。下面就来说说我遇到的问题。 前两天在项目中遇到了一个问题&#xff0c;大致描述就是我写了如下一个类&#xff08;只列出关键代码&#…

2个域名重定向到https域名

配置实例&#xff1a; [rootiZbp17q09o7e8pgg9dybd7Z conf.d]# cat company.confserver { listen 80; server_name www.yu*******dao.com www.bj******kd.com; if ($host ! www.yu********dao.com) { rewrite ^/(.*)$ http://www.yu**********dao.com/$1 permanent; } return …

mysql 部门表_MySQL高级

本文大纲环境win10-64MySQL Community Server 5.7.1mysqld –version可查看版本官方文档SQL执行顺序手写顺序我们可以将手写SQL时遵循的格式归结如下&#xff1a;select distinct from join on wheregroup byhavingorder bylimit <offset>,<rows>distinct&…

使用Apache Camel发布/订阅模式

发布/订阅是一种简单的消息传递模式&#xff0c;其中&#xff0c;发布者将消息发送到某个频道&#xff0c;而无需知道谁将接收消息。 然后&#xff0c;通道负责将消息的副本传递给每个订户。 此消息传递模型允许创建松耦合和可伸缩的系统。 这是一种非常常见的消息传递模式&am…

移动端(H5)弹框组件--简单--实用--不依赖jQuery

俗话说的好&#xff0c;框架是服务与大家的&#xff0c;包含的功能比较多&#xff0c;代码多。在现在追求速度的年代。应该根据自己的需求去封装自己所需要的组件。 下边就给大家介绍一下自己封装的一个小弹框组件&#xff0c;不依赖与jQuery&#xff0c;代码少&#xff0c;适…

IDEA界面

Alt数字&#xff1a;出来你需要的界面转载于:https://www.cnblogs.com/chanaichao/p/9214327.html