什么是同源?
什么是源?
- 通过window.origin或location.origin可以得到当前源
- 源=协议+域名+端口号
如何判断两个url是不是同源?
- 通过对比两个url:
协议
,域名
,端口号
这3项要完全一致,他们就是同源
什么是跨域?
- 浏览器规定,如果JS运行在源A里,那么就只能获取源A的数据,不能获取源B的数据,即不允许跨域
- 跨域就是通过JSONP或者CORS方法,运行在源A的JS获取源B的数据
JSONP 跨域?
- JSONP就是当前浏览器不支持CORS,我们必须使用另外一种方式来跨域,于是我们就请求一个js文件,这个js文件会执行一个回调,回调里面就有我们的数据
- 让js文件包含数据让我们来引用
- 比如fark.com要获取qq.com的数据
- qq.com写一个新的js文件YYY.js包换数据
- fark.com定义好window.xxx函数
- YYY.js就执行window.xxx函数
- fark.com就可以获取qq.com的数据
JSONP优点和缺点
JSONP
优点- 最大优点:兼容IE和可以跨域
JSONP
缺点- 因为他是
script
标签,他读不到AJAX那样精确的状态,没法知道状态码和响应的头是什么,他只有成功和失败两种状态 - 因为他是
script
标签,他只能发GRT请求,不支持POST
CORS 跨域?
- 跨域资源共享
(CORS)
是一种机制,它使用额外的HTTP
头来告诉浏览器 让运行在一个origin (domain)
上的Web应用被准许访问来自不同源服务器上的指定的资源。 - 响应首部中可以携带一个
Access-Control-Allow-Origin
字段即可进行跨域
Access-Control-Allow-Origin: http://mozilla.com
上述代码意思是:允许来自http://mozilla.com
的请求