• 问题现象

  当页面地址协议与页面内请求地址协议不一致(不都是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. Linux操作随笔

    1.查看php加载的模块 /usr/local/php/bin/php -m |less 2.查询连接数 netstat -ntu | awk '{print $5}' | cut -d: -f1 | ...

  2. Linux 内核管理

    Linux内核基础:Linux Kernel:  Linux内核的体积结构是单内核的,但充分借鉴了微内核设计体系的优点,为内核引入模块化机制,使得虽然是单内核,但工作在模块化的方式下,并且模块可以动态 ...

  3. JS三角形

    1.直角三角形 <script> ; ; i++) { //外层循环代表的是要循环的行数 ; j < i; j++) { //内层循环代表的是要打印的列数 document.writ ...

  4. 《黑白团团队》第八次团队作业:Alpha冲刺 第三天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第三天 日期:2019/6/17 成员 ...

  5. 如何在 VMware 上安装 CentOS 6.8

    一.下载 CentOS 6.8  64位 链接:https://pan.baidu.com/s/15qmWGar2m0WzsWxDk4tSSg 密码:wqra 二.安装步骤 1.新建虚拟机 2.自定义 ...

  6. @value 注解获取属性文件中的值

    一.属性文件 db.properties name=jack 二.配置文件 applicationContext.xml <!-- 加载配置文件,该节点只能存在一个,所以用 * ,加载所有属性文 ...

  7. 仿照CIFAR-10数据集格式,制作自己的数据集

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50801226 前一篇博客:C/C++ ...

  8. ie版本

    <!--[if lte IE 6]> 自定义代码 <![endif]-->

  9. yii rbac管理

    以下是Controller代码 <?php /** * Created by PhpStorm. * User: zhoukang * Date: 2017/6/11 * Time: 19:31 ...

  10. 使用magento eav数据模型为用户提供图片上传功能的实践

    一,在megento表中,增加一个存储上传图片路径的属性, 给magento的customer实体类型增加一个audit_file_path属性,因为要customer使用的是EAV模型,得操作几个关 ...