跨域相关

跨域是前端开发中经常遇到的一个问题,主要是由于请求的源地址与目标地址不同源产生的问题。下面我们就深入的了解和学习一下有关跨域的那些事儿。

同源策略是什么鬼?和跨域有什么关系?

同源策略最早出现于1995年的网景浏览器,它限定了不同源脚本之间的访问权限,比如cookie等信息,保障了浏览器的安全性。比较官方、常见的解释有,

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。--MDN

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。--百度百科

跨域又是什么呢?简单地说,跨域是指为了解决由于同源策略带来的限制,保证不同源脚本可以调用的一种概念。为了更好的解决同源限制,我们继续看同源策略。

同源策略的规则

怎么才算是同源呢?看规定

同源策略规定只有协议、域名、端口都一致的才算同源。

说道这些我们先来看一下这个URL源的组成。 一般的url都由以下几个部分组成:协议、域名、端口、路径、search、hash,如下图

根据上图及同源规则,以http://www.heioray.com/index.html为例,我们来看一下下面各个url与这个URL的同源情况

对比的URL

结果

分析

http://www.heioray.com/info2.html

同源

协议、域名一致,http协议端口默认80一致

http://www.heioray.com/info2/other.html

同源

同上

http://www.heioray.com:81/info/other.html

不同源

端口不一致

https://www.heioray.com/info/other.html

不同源

协议不一致

http://heioray.com/info/other.html

不同源

一级域名一致,二级域名不一致

http://v2.www.heioray.com/info/other.html

不同源

同上

同源策略都限制了什么?

首先从一个页面展现上来看,涉及到URL请求的通常包括以下几个部分 1、script、style标签 2、img、audio等资源文件 3、xml http请求 其中前两类同源策略是不限制的,唯一限制的就是最后一个。根据http请求头里面有一个referer属性,浏览器可以识别请求与目标是否同源,并进行限制。

解决方案

那针对同源策略,我们需要跨域时怎么办呢?

利用同源策略没有覆盖到的地方

1、这就是Jsonp的原理,但有一个缺点,JSONP只能发送get请求 2、cookie在同源策略中的限制并不完整,它允许一级域名一致的两个url,在设置一级域名为domain的情况下共享cookie

document.domain = 'example.com';

其次设置header

这种设置一般需要服务端支持,在服务端设置允许跨域的header属性

res.setHeader("Accept", "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8");
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS,DELETE,PUT");
res.setHeader('Access-Control-Allow-Credentials', true);

cors本身在服务端也是这个原理

此外 1、对于frame插入 服务端在响应头里面有一个X-Frame-Options头属性,它限定了该页面是否可以被作为frame调用,而这个属性有三个值可选: DENY:浏览器拒绝当前页面加载任何Frame页面 SAMEORIGIN:frame页面的地址只能为同源域名下的页面 ALLOW-FROM:允许frame加载的页面地址 2、node框架解决方案? node下解决主要两个思路, 自己写。自己写无非就是设置header 用现有模块。npm上有一个叫cors的模块。在node主文件require进来,然后app.use()一下即可,简单便捷。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏赵俊的Java专栏

Hexo 扩展 --- 优雅的备份 Hexo 博客

6033
来自专栏磨磨谈

cephonebox发布(ceph+calamari集成iso)

现在已经是2016年收官的一个月了,之前一直想做一个calamari的集成版本,之所以有这个想法,是因为,即使在已经打好包的情况下,因为各种软件版本的原因,造成...

904
来自专栏实用工具入门教程

如何搭建微信订阅号后台服务

微信公众号后台自带的功能可能有时不能满足我们的需要,这时候我们就需要搭建自己的服务端。本实验带您从零开始,基于 NodeJS 搭建起一个可以支撑微信订阅号自动回...

1.7K4
来自专栏软件测试经验与教训

如何手写LR脚本?

教学网址:http://computer-database.gatling.io/computers

1162
来自专栏Guangdong Qi

xcode模拟器上下黑边

1905
来自专栏DeveWork

WordPress主题开发:添加主题更新提醒功能

WordPress官方的主题都可以自动更新升级,但如果是个人分享的免费或收费主题的话,通过下面的教程,也可以为你的私人主题添加版本更新提示。这个提示会直接显示在...

2228
来自专栏王磊的博客

Visual Studio扩展工具添加与卸载

简介:vs 作为主流的开发工具之一,其强大的功能无可厚非,但日益增加的需求就使得vs的扩展工具成为优秀dev所必备的利器之一。 Visual Studio扩展工...

3826
来自专栏HTML5学堂

如何创建Git本地仓库与服务器端仓库的关系

HTML5学堂-利利:关于Git的知识,我们共分成了四个大步骤进行讲解,之前我们提到了Git的安装与配置、Git在本地的使用方法,今天我们要讲解的就是如何创建G...

44011
来自专栏云计算教程系列

Linux也有后悔药,五种方案快速恢复你的系统

新手在学习Linux系统的时候,难免会遇到命令输错,或系统出错的难题。那么如何快速解决呢?本文就先给你一个后悔药,让你快速备份并恢复Linux系统。本文将以Ub...

3052
来自专栏运维前线

CentOS 6.8 部署zookeeper集群

由于公司缓存方案改进,准备采用codis集群作为主要的缓存解决方案(codis:国内豌豆荚开发的redis集群解决方案,已开源,github地址:https:/...

26310

扫码关注云+社区

领取腾讯云代金券