同源和跨域

同源

什么是源

如果两个url的

• 协议
• 域名
• 端口号

完全一致， 那么这两个url就是同源的

如何得到当前源

window.origin
location.origin
可以得到当前源

同源策略

浏览器规定：
不同源的页面之间，不能相互访问数据。不允许跨域获取。
同源策略限制的是数据内容上的访问，我们引用CSS、JS的时候，其实并不知道其内容，我们只是在引用

这是浏览器的功能，故意这样设计的。
为什么这样设计？
保护用户隐私。
根源：浏览器无法区分发送者
网页里面的 JS 发的请求几乎没有区别（referer 有区别）
如果后台开发者没有检查 referer，任何网页的数据都会暴露。
总之，浏览器应该主动预防这种行为，即设置严格的同源策略

跨域

为什么跨域

网站间的数据共享

CORS（Crocs Origin Resource Share）

ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。
使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，
如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;
浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。

response.setHeader("Access-Control-Allow-Origin","www.huchangkuang.com")

JSONP(JSON with padding)

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。
JSONP通过同源策略涉及不到的”漏洞”，也就是像img中的src，link标签的href,script的src都没有被同源策略限制到
JSONP只能get请求