同源策略与跨域
同源策略是什么
同源策略(Same-Origin Policy)是指浏览器限制从一个源加载的文档或脚本与来自另一个源的资源进行交互的安全措施。同源指的是协议、域名和端口号都相同。
http://www.baidu.com/s
http://www.baidu.com:80/ssdasdsadad
浏览器默认遵守同源策略
优点
- 保证用户的隐私安全和数据安全。
- 防止恶意网站通过恶意脚本攻击其他网站
缺点
前端需要访问另一个域名的后端接口,会被浏览器阻止其获取响应。
比如甲站点通过 AJAX 访问乙站点的 /money 查询余额接口,请求会发出,但是响应会被浏览器屏蔽。
解决方案
跨域(Cross-Origin)
JSONP (JSON with Padding)
-
甲站点利用 script 标签可以跨域的特性,向乙站点发送 get 请求。
-
乙站点后端改造 JS 文件的内容,将数据传进回调函数。
-
甲站点通过回调函数拿到乙站点的数据
CORS(Cross-Origin Resource Sharing)
CORS 的实现是通过在 HTTP 头部添加一些特定的字段来完成的。当浏览器发起跨域请求时,会在请求头部添加一个 Origin 字段,表示当前请求的源。
如果服务器端允许该源访问,就会在响应头部添加一个 Access-Control-Allow-Origin 字段,表示允许该源访问。
- Access-Control-Allow-Methods:允许的 HTTP 方法;
- Access-Control-Allow-Headers:允许的头部信息;
- Access-Control-Max-Age:预请求的有效期,单位为秒。