同源策略(浏览器安全限制)
1、同源 (三个只要有一个不一样就是跨域) (都一样叫同源)
● 协议相同
● 域名相同
● 端口相同
2、限制
● cookie localStorage 信息共享
● ajax 限制跨域
为什么要有同源限制?
我们举例说明:比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了
(1)解决跨域 JSONP
利用script 的src 不受同源限制 只要给它一个能找到的脚本 就能引入进来 并当作脚本运行
JSONP原理
创一个script标签、设置它的type类型、将url给script.src
通过cb(和后台制定的cd)字段 将创建的函数名 携带过去 地址?cb=callback
query.id 就是保存的函数名
script src会将引入进来的内容当作js脚本运行 callback执行
JSONP跨域 通过script的src请求接口 并将回调函数名 通过查询参数的某个字段 传递给后台
后台得到这个传递过去的函数名 拼接成函数执行字符串 并将数据以实参的形式 响应给客户端
客户端把他当作脚本加载运行 导致这个回调函数执行
(2) CORS(服务器支持) 解决跨域第二种方法
在响应头设置
允许所有源跨域
● setHeader("Access-Control-Allow-Origin","*")
允许某一个源跨域
● setHeader("Access-Control-Allow-Origin","http://localhost:63342")
● setHeader("Access-Control-Allow-Origin","http://127.0.0.1:63342")