浏览器的同源策略和跨域

时间:2020-8-24 作者:admin

同源

如果两个 url 的协议域名端口号完全一致,那么这两个 url 就是同源的。

同源策略

浏览器规定,如果 JS 运行在源 A 中,那么只能获取到源 A 的数据,不能获取到源 B 的数据,即不允许跨域,不同源的页面之间,不准互相访问数据(目的是为了保护用户隐私)。

跨域

为了突破浏览器的同源协议,进行不同网站间的数据交换,我们需要跨域。

1. CORS (跨域资源共享)

如果需要跨域,需要在服务器(后端)上声明,需要在响应头上声明哪些网站可以请求数据。但是 CORS 在 ie 6,7,8,9 上不支持。

response.setHeader('Access-control-Allow-Origin', 'http://pan.com:9999') 

2. JSONP

由于在某些浏览器不支持 CORS 或者当前环境不支持 CORS,必须使用其他方式来进行跨域,于是我们请求一个 JS 文件,这个 JS 文件会执行一个回调函数,回调函数里面包含我们需要的数据,回调的名字可以随机生成,以 callback 的方式传给后台,后台会把函数返回给我们然后再执行。
(当前网站创建一个 script 去请求另一个网站的 JS, JS 里面包含一些数据,这些数据会在我的网站上调用一个去全局函数运行)。

JSON 的优缺点

优点:

  1. 兼容 ie
  2. 可以进行跨域操作

缺点:

  1. 由于它是 script 标签,它不能像 AJAX 那么精确,不知道状态码是多少,不知道响应头是什么,只知道成功和失败
  2. 由于它是 script 标签,只能发 get 请求,不支持 post

实现:

(假设我们需要在 B 网站请求 A 网站的数据)

  • 在网站 A 的服务器端,定义一个 JS 文件
  • 将网站 A 中含有数据的 JSON 文件(或者其他文件)的内容,放到这个 JS 文件里面
  • 然后让网站 B 获取到这个包含数据的 JS 文件
  • 网站 B 再对这个包含数据的 JS 文件进行操作
  • 为了能让这个含有数据的 JS 文件能够定向分享给网站 B,可以在网站 A 的服务器端使用 referer 来实现
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。