• 问题现象

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

    slab:由于内核会有许多小对象,这些对象构造销毁十分频繁,比如i-node,dentry,这些对象如果每次构建的时候就向内存要一个页(4kb),而其实只有几个字节,这样就会非常浪费,为了解决这个问题 ...

  2. 【BZOJ3065】带插入区间k小值

    题意: 带插入,修改的区间k小值在线查询 原序列长度<=35000,插入个数<=35000,修改个数<=70000,0<=权值<=70000 题解: Orz vfleak ...

  3. python面向对象的三大特性之一多态

    多态 多态的特性是调用不同的子类将会产生不同的行为,而无需明确知道这个子类实际上是什么 说白了就是,不同的对象调用相同的方法,产生不同的行为 例如:s1是字符串类型,w1是列表,两个完全不同的对象,他 ...

  4. ES6继承语法

    <!--http://www.56.com/u85/v_MTMyNjk1OTc4.html--> <!DOCTYPE html> <html> <head&g ...

  5. redis_1 安装和简单使用

    前言: mysql 数据库:数据以“文件形式存储在硬盘”里面.硬盘的存取速度很慢.数据库是一个系统中最占用资源的部分.当sql语句比较复杂(关联的表比较多的时候),每执行一次就会消耗大量的资源.倘若一 ...

  6. HDU 4394 BFS

    M2%10x=N (x=0,1,2,3....) 给出N.找到最小的满足条件的M 因为:N的个位仅仅由M的个位决定.N十位由M的个位和十位决定,N的百位由M的个位十位百位决定.以此类推 全部从个位開始 ...

  7. [Tailwind] Get started with Tailwindcss

    In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. ...

  8. hdu 1754 I Hate It 线段树 点改动

    // hdu 1754 I Hate It 线段树 点改动 // // 不多说,裸的点改动 // // 继续练 #include <algorithm> #include <bits ...

  9. [IOS]mac以太网连接

    今天玩了一下苹果一体机.感觉还是蛮不错的,只是.就是用以太网连接的时候遇到了一点问题.用这篇文章记录一下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/ ...

  10. linux中设置TAB键的宽度

    对于编程的人员来说,常常须要排版代码,这时候就须要TAB键,但TAB键的宽度太大,非常有可能代码太长,延伸到下一行,这个时候你就须要设置TAB键的宽度了. linux下设置TAB键的宽度,做法例如以下 ...