• 问题现象

  当页面地址协议与页面内请求地址协议不一致(不都是https或不都是http)时,往往请求会被拦截。控制台提示:

  

  • 原因

  浏览器对于JavaScript的同源策略的限制,简言之就是我们常说的跨域。

  • 处理

  处理跨域的方式有很多,对于前端而言,JSONP是不错的选择。但现阶段,大多数第三方平台会同时提供https和http两种协议下的可访问资源地址,尤其是CDN资源,那么处理这种这种跨域的简单方法来了:相对URL。相对URL使用更加模糊的语法,如:

    <script src='//xxx.cdn.net/xxx.js'></script>

  在这里,资源地址不添加协议名,在这种情况下,src将使用当前浏览器地址栏中的协议名。在HTTPS页面上,这将是对CDN的HTTPS请求,在HTTP页面上,它将是HTTP请求。这样就可以解决大多数的CDN资源问题。

相对URL:协议名跨域的一种处理方式的更多相关文章

  1. ajax处理跨域有几种方式

    一.什么是跨域 同源策略是由Netscape提出的著名安全策略,是浏览器最核心.基本的安全功能,它限制了一个源(origin)中加载文本或者脚本与来自其他源(origin)中资源的交互方式,所谓的同源 ...

  2. CORS 协议(跨域资源共享)

      跨域问题 只要协议.域名.端口有任何一个不同,都被当作是不同的域.   为什么会有跨域的限制? 之前发生过的一些跨域安全事件: 新浪微博XSS受攻击事件 2011年6月28日晚,新浪微博出现了一次 ...

  3. springboot中通过cors协议解决跨域问题

    1.对于前后端分离的项目来说,如果前端项目与后端项目部署在两个不同的域下,那么势必会引起跨域问题的出现. 针对跨域问题,我们可能第一个想到的解决方案就是jsonp,并且以前处理跨域问题我基本也是这么处 ...

  4. 详解 CORS跨域的几种不同实现方式

    CORS 定义 CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing),它允许浏览器向跨源服务器,发出XMLHttpRequ ...

  5. vue开发环境和生产环境里面解决跨域的几种方法

    什么是跨域   跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...

  6. php跨域的几种方式

    PHP实现跨域的几种形式 1.JSONP(JSON with padding)原理 利用html里面script标签可以加载其他域下的js这一特性,使用script src的形式来获取其他域下的数据, ...

  7. SpringMVC解决跨域的两种方案

    1. 什么是跨域 2. 跨域的应用情景 3. 通过注解的方式允许跨域 4. 通过配置文件的方式允许跨域 1. 什么是跨域 跨域,即跨站HTTP请求(Cross-site HTTP request),指 ...

  8. JSONP(跨域请求) —— 一种非官方跨域数据交互协议

    1.JSONP的作用 由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名.协议.端口)的资源,为 了实现跨域请求,可以通过script标签实现跨域请求,然后再服务器端输出JSON数 ...

  9. 使用js解决response.sendRedirect("...")重定向URL之后出现跨域问题

    背景: 本系统与门户系统单点登录时候,需要重定向到门户系统的登录页面,可是如果长时间没有操作的话,session会话失效,就需要跳转到登录页面. 所以在使用 response.sendRedirect ...

随机推荐

  1. [Libre 6282] 数列分块入门 6 (分块)

    原题:传送门 code: //By Menteur_Hxy #include<cstdio> #include<iostream> #include<algorithm& ...

  2. weex手机端安全键盘

    github地址:weexSafeKeyboard 效果图: 技术依赖:框架:weex+vue 弹出层:weex-ui 图标:iconfont 说明:1.如果不想用到weex-ui,可以把inputk ...

  3. Java中发邮件的6种方法

    1.官方标准JavaMail Sun(Oracle)官方标准,功能强大,用起来比较繁琐. 官方资料:http://www.oracle.com/technetwork/java/javamail/in ...

  4. 06005_Jedis入门

    1.Jedis介绍 (1)Redis不仅是使用命令来操作.现在基本上主流的语言都有客户端支持,比如Java.C.C#.C++.PHP.Node.js.Go等: (2)在官方网站里列有一些Java的客户 ...

  5. PHP学习总结(6)——PHP入门篇之PHP语句结束符

    PHP语句结束符 有的小伙伴们是不是已经注意在每一条PHP代码行结尾处都会有一个分号:.对的,这点注意,在PHP编程中需要在每条语句的末尾加入分号:.但要注意,分号:一定在半角状态下输入噢.

  6. 前端框架Bootstrap简单介绍

    下载: 解压之后: 把这些文件拷贝到项目中 页面使用时  只需要引入: 然后我们就可以参考官网来设计需要的前端页面了 设计一个按钮:button 只需要标明css样式中使用的类  下面就是现实效果:

  7. POJ 4786 Fibonacci Tree

    Fibonacci Tree Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ...

  8. mysql数据库优化原则

    一.一个例子 数据库需要处理的行数: 189444*1877*13482~~~479亿 如果在关联字段上加上合适的索引: 数据库需要处理的行数:368006*1*3*1~~~110万 MySQL通常是 ...

  9. spring的bean注入扫瞄方法和mybatis的dao bean注入扫描方法

    spring的bean注入扫面方法:@ComponentScan(basePackages = "com.pingan.property.icore.pap.*")mybatis的 ...

  10. 在Eclipse中创建Maven多模块项目

    在Eclipse中创建Maven多模块项目1,创建多模块项目选择File>New>Project,打开New Project窗口,选择Maven>Maven Project,选择下一 ...