跨域、同源策略、JSON

理解浏览器同源策略与跨域处理

最新推荐文章于 2024-09-20 21:34:47 发布

原创最新推荐文章于 2024-09-20 21:34:47 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了浏览器的同源策略，包括协议、域名和端口必须完全匹配的规则，以及违反该策略导致的跨域问题。文中提到了解决跨域的JSONP和CORS方式，并探讨了回调地狱及其解决方案，如使用闭包和Promise。同时，还对JSON数据格式进行了阐述，强调其易读性、解析效率和包含对象、数组及嵌套结构的特点。

浏览器同源策略

说明: 浏览器解析页面时,当页面中有ajax请求时,则要求页面的URL地址,与Ajax请求的地址必须满足同源策略的规范.
同源策略:
1.请求协议 http:// 、https://
2. 请求域名
3.请求的端口
上述的三项必须死等（必须长得一模一样）. 满足同源策略.浏览器可以解析数据,否则不能正常解析.
ASCII码不同则不满足同源策略

案例练习1:
URL: http://www.jd.com/xxx/xxx
Ajax: https://www.jd.com/xxx/xxx/xxx 协议不同

案例练习2:
URL: http://www.jd.com:80/xxx/xxx 满足要求
（ Ajax: http://www.jd.com:80/xxx/xxx/xxx ）浏览器默认端口80
Ajax: http://www.jd.com/xxx/xxx/xxx

案例练习3: IP与域名对应 ASCII码不同则不满足同源策略
URL: http://www.jd.com:80/xxx/xxx 不满足要求域名不同
Ajax: http://10.0.0.6:80/xxx/xxx/xxx
DNS 域名解析服务器

案例练习4:
URL: http://www.jd.com/xxx/xxx 不满足要求域名不同
Ajax: http://www.jt.com/xxx/xxx/xxx

2.跨域：url地址和ajax请求路径违反了同源策略，则称为跨域
@CrossOrigin(origins = "*")允许所有请求
2.1解决策略：
旧的方式：JSONP
新： CORS方式
CORS:跨域（源）资源共享
核心：服务器在响应头中标识了可以访问的用户地址：CORS服务端跨域

回调地狱：

解释: 由于ajax多层级嵌套,导致返回值的回调函数解析困难.把这种调用称之为回调地狱问题.
解决方案:
1.闭包解决（核心：闭包非闭）
2. 通过promise对象进行封装 vue对象中解释的.
将内层的ajaxa async：false改为同步解决回调

JSON:

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JSON结构：对象格式，数组格式，嵌套格式
对象格式：对象无序，{"key":"value","key":"value",……}
数值格式：数组有序，value的有序集，[1,2,3，"张三","李四",]{"key":"value","key":"value",……},……]
嵌套格式：value可以嵌套:数组和对象格式嵌套
[{"学生":{"address":{"中国":{"宁夏回族自治区":{"银川":{"西夏区":{"北方民族大学":{"商学院":{"电子商务":["181","182"],"物流管理":["181","181"]},"马克思主义学院":{"学院":"班级"},"计算机学院":{"学院":"班级"},"法学院":{"学院":"班级"},"化工学院":{"学院":"班级"},"体育学院":{"学院":"班级"},"基础教育学院":{"学院":"班级"}}}}}}}}}]

js中可以根据返回值的数据动态匹配类型，即参数四可以不写
$.get("url地址","参数",function(data){},"返回值类型")
$.post()参数与get一致
$.getJSON()参数与get前三个参数一致,（只有三个参数）没有返回值类型
$.ajax()type,url,contentType,data,dataType,success,error