初识跨域

106 阅读1分钟

在了解跨域之前我们先了解下什么是同源

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

列如:

这两个url就是同源的
http://store.company.com/dir2/other.html
http://store.company.com/dir/inner/another.html

浏览器规定,如果JS运行在源A里,那么只能获取源A的数据;不能获取源B的数据,即不允许跨域,这样做是为了保护用户隐私。

什么是跨域

既然浏览器规定当JS运行在源A里时只能读取源A的数据,不能获取源B的数据,那么跨域就是让运行在源A的JS获取源B的数据

JSONP 跨域

JSONP是什么?

我们在跨域的时候由于当前浏览器不支持CORS,或者因为某些条件不支持CORS我们必须使用另外一种方式跨域。于是我们就请求一个JS文件,这个JS文件会执行一个回调,回调里面就有我们的数据(这个回调的名字是可以随机生成的一个随机数然后我们把这个名字以callback的参数传给后台,后台会把这个参数再次返回给我们并执行)

JSONP的优点:

  1. 兼容IE
  2. 可以跨域

JSONP的缺点:

  1. 由于JSONP是script标签所以它读不到AJAX那么精确的状态(它不知道相应码和响应头,只知道成功和失败)
  2. 由于它是script标签所以它只能发GET,不支持

CORS 跨域

CORS 是 HTTP 的一部分,它允许服务端来指定哪些主机可以从这个服务端加载资源。

在相应头里面加:Access-Control-Allow-Origin:foo.exampl