之前对于跨域相关的知识一致都很零碎,正好现在的代码中用到了跨域相关的,现在来对这些知识做一个汇总整理,方便自己查看,说不定也可能对你有所帮助。

本篇主要内容如下:

  • 浏览器同源策略
  • http 请求跨域
  • http 请求跨域解决办法
  • cookie 机制
  • 如何共享 cookie

浏览器同源策略

  相信很多人在 web 入门时,都被跨域问题折磨的死去活来。要想完全掌握跨域就得知道为什么会有跨域这个问题出现。

  简单来说跨域问题是因为浏览器的同源策略导致的。那浏览器为什么要有同源策略呢?

  当然是为了安全。没有同源策略限制的浏览器环境是非常危险的(即使有了同源策略也不是百分百安全),有兴趣的可以去了解了解CSRFXSS攻击。

  所谓的“同源”指的是“三个相同”:

  • 协议相同。不能一个是 http 协议,一个是 https
  • 域名相同
  • 端口相同

如果非同源页面有以下限制:

  • LocalStore 和 IndexDB 无法读取。这两个显然是不能读取的,但是 cookie 有点不一样,放在后面单独说明
  • DOM 无法获取,比如如法在页面 A 中通过 iframe 获取异源页面 B 的 DOM
  • AJAX 请求无法读取(可以发送请求,但是无法读取到请求结果。比如在页面 A 中请求异源接口 B,请求会正常发出处理,但是在页面 A 中无法获取请求结果,除非响应头 Access-Control-Allow-Headers 中允许了页面 A 的源,这样就能读取到结果)

  但是这里有个例外,所有带“src”属性的标签都可以跨域加载资源,不受同源策略的限制,这样你应该可以想到一个比较古老的跨域解决方案(JSONP),同时这个特性也会被用作 CSRF 攻击。

http 请求跨域

  在前端开发中经常会遇到跨域的问题,比如前后端分离中前后端部署在不同的端口上,或者在前端页面中需要向另外一个服务请求数据,这些都会被跨域所阻挡。

目前主要有以下几种办法解决跨域问题:

  1. 关闭浏览器同源检查

  这个太暴力,也太不安全了,不用考虑。

  1. jsonp 实现跨域请求

  前面说过了浏览器对于带 src 属性的标签都可以跨域的。因此 jsonp 的实现流失利用了这个特性,在页面中动态插入一个<script>标签,然后他的 src 属性就是接口调用地址,这样就能访问过去了,然后再讲返回内容特殊处理成立即执行的函数,这样就看起像进行了一次跨域请求。之所以不推荐这种方式,主要有以下两个原因:

  • 实现复杂,且需要前后台同时修改才能实现
  • 只能进行 get 请求
  1. 服务器设置运行跨域

  这种方法只需要后台做处理便能实现跨域,前面说的 http 跨域请求是能够发出去的,只是不能接收,那我们只要在响应头Access-Control-Allow-Headers中加入允许请求的地址即可,以,分隔,同时*代表所有地址都允许。比如:

Access-Control-Allow-Headers:http://localhost:8081,http://localhost:8082

本方法是较为常用的一中跨域办法,只需简单修改服务端代码即可。

  1. 请求代理

  这也是非常常用的一种跨域方法。跨域限制只是浏览器限制,服务端并没有这个概念,因此我们在前端还是请求同域地址,然后在服务端做一个代理,将请求转发到真正的 ip 和端口上。通常使用 nginx 实现端口转发,比如下面一段 nginx 配置:

server {
# /test1/abc 转发到 http://a.com:8011/abc
location /test1/ {
proxy_pass http://a.com:8011/;
} # /test2/abc 转发到 http://b.com:8011/main/abc
location /test2/ {
proxy_pass http://b.com:8011/main/;
} # /test3/abc 转发到 http://c.com:8011/test3/abc
location /test3/ {
proxy_pass http://c.com:8081;
}
}

cookie 同源策略

  cookie 的同源策略是通过

Domainpath两个部分来共同确认一个 cookie 在哪些页面上可用。

  Domain确定这个 cookie 所属的域名,不能带端口或协议。因此 cookie 便可在不同端口/不同协议下共享,只要域名相同。有一个例外是父子域名间也能共享 cookie,只需将 Domain 设置为.父域名

  path就简单多了,通过 Domain 确定哪些域名可以共享 cookie,然后在通过path来确定 cookie 在哪些路径下可用。使用/表示所有路径都可共享。

具体如下:

注意:在跨域请求中,即时目标地址有 cookie 且发起请求的页面也能读取到该 cookie,浏览器也不会将 cookie 自动设置到该跨域请求中。比如在http://localhost:8082/a页面中请求http://localhost:8081/abc,这两个地址下拥有共享cookie,http请求也不会携带cookie。

web跨域的更多相关文章

  1. web跨域访问,session丢失的问题

    web跨域访问,session丢失的问题25 http://www.iteye.com/problems/71265 http://www.iteye.com/topic/264079 具体情况如下: ...

  2. Web跨浏览器进程通信(Web跨域)

    Web跨域已是老生常谈的话题,这次来尝试下跨域浏览器进程之间的通信 —— 这在过去基本依靠网络中转实现   在之前一篇文章里尝试了跨浏览器的数据共享,最后提到使用LocalConnection还可以实 ...

  3. web跨域及cookie相关知识总结

    原文:web跨域及cookie相关知识总结   之前对于跨域相关的知识一致都很零碎,正好现在的代码中用到了跨域相关的,现在来对这些知识做一个汇总整理,方便自己查看,说不定也可能对你有所帮助. 本篇主要 ...

  4. web跨域问题回顾

    晚上看spring web源码时看到了cors包,查了一下原来是在4.2之后新加的用来更方便让web应用服务支持cors协议的.于是有了下面几个问题. web跨域问题的起源是因为浏览器为了安全而遵循的 ...

  5. Web跨域问题总结

    一.跨域问题的由来为了防止某些文档或脚本加载别的域下的未知内容造成泄露隐私,破坏系统等安全行为,1995年, Netscape 公司在浏览器中引入同源策略/SOP(Same origin policy ...

  6. web跨域解决方案

    阅读目录 什么是跨域 常用的几种跨域处理方法: 跨域的原理解析及实现方法 总结 摘要:跨域问题,无论是面试还是平时的工作中,都会遇到,本文总结处理跨域问题的几种方法以及其原理,也让自己搞懂这方面的知识 ...

  7. cors解决Web跨域访问问题

    首先了解一下什么是跨域以及解决的几种常见方式. 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器施加的安全限制. 所谓同源是指,域名,协议,端口均相同. 举例: 相对于 ...

  8. web跨域问题(No 'Access-Control-Allow-Origin'..)

    1. 问题 angular开发中连接java服务时出现跨域问题(No 'Access-Control-Allow-Origin'..). 如下图 解决方法 2,原因分析 这个与安全机制有关,默认情况下 ...

  9. Web 跨域请求(OCRS) 前端解决方案

    1.同源策略如下: URL 说明 是否允许通信 http://www.a.com/a.jshttp://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.j ...

  10. java web 跨域

    服务器端解决跨域问题的三种方法   跨域是指html文件所在的服务器与ajax请求的服务器是不同的ip+port,例如: - ‘192.168.1.1:8080’ 与 ‘192.168.1.2:808 ...

随机推荐

  1. webservice 学习笔记 1

    Webservice----------->跨语言服务调用 (视频学习总结) 1-1.有OA系统 需要添加一个功能,登录之后显示天气情况 此时可以使用Webservice eg1: 气象局自己有 ...

  2. 开启关闭mysql服务

    1.Windows下 启动服务 mysqld --console 或 net start mysql 关闭服务 mysqladmin -uroot shudown 或 net stop mysql   ...

  3. 电脑同时安装python2和python3 ,默认使用python3

    python3环境变量放在python2前面: 此电脑--属性--高级系统设置--高级--环境变量--系统变量--Path--编辑 D:\Python36\Scripts;D:\Python36;C: ...

  4. C#设计模式V2(1)——单例模式

    出自:https://www.cnblogs.com/zhili/p/SingletonPatterm.html 一.引言 最近在设计模式的一些内容,主要的参考书籍是<Head First 设计 ...

  5. 分批插入数据基于mybatis

    DB框架:Mybatis.DataBase:Oracle. ---------------------------------------------------------------------- ...

  6. java 调用DB2 SYSPROC.ADMIN_CMD存储过程导出数据

    import java.sql.CallableStatement; import java.sql.Connection; import java.sql.DriverManager; import ...

  7. 11.Container With Most Water (Array; Two-Pointers)

    Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai).  ...

  8. linux随笔-01

    认识linux 开源共享精神 低风险 高品质 低成本 更透明 开源软件的特点 使用自由.修改自由.传播自由.收费自由以及创建衍生品的自由 常见的开源许可协议 GNU GPL(GNU General P ...

  9. React 滚动事件

    代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UT ...

  10. docker-ce创建gitlab-ce容器笔记

    前言 vagrant + ubuntu 16.04 设置 apt 源 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak sudo vim ...