标签：qq lzy 跨域 js 访问 host 同源 com
跨域
1.跨域关键知识
- 同源策略
浏览器故意设计一个功能限制 - CORS
突破浏览器限制的一个方法 - JSONP
IE时代的妥协
2.同源策略
2.1 同源定义
- 源
window.origin或location.origin可以得到当前源
源=协议+域名+端口号
- 如果两个url的
协议
域名
端口号
完全一致，那么这两个url就是同源 - 举例
1.https://qq.com 和 https://www.baidu.com 不同源
2.https://baidu.com 和 https://www.baidu.com 不同源
3.只有完全一致才算同源
2.2 同源策略定义
- 浏览器规定
1.如果JS运行在源A里，那么就只能获取源A的数据
2.不能获取源B的数据，即不允许跨域 - 举例
1.假设frank.com/index.html 引用了 cdn.com/1.js
2.那么就说 [ 1.js 运行在源 fank.com里 ]
3.注意：这跟cdn.com没有关系，虽然 1.js 从它那里下载
4.所以 1.js 就只能获取 frank.com 的数据
5.不能获取 1.fank.com 或者 qq.com的数据 - 这就是浏览器的功能
浏览器故意这样设计的
2.3 浏览器这样做的目的
- 为了保护用户隐私
- 例如用户已经登陆QQ空间，AJAX请求/friend.json可获取用户好友列表
- 当有个钓鱼网站，你不小心点开这个网页登陆，那这个网页也请求你的好友列表
- 如果没有同源策略，那么你的好友列表就被黑客偷走了
- 因此：只要URL有一丁点不一样，都不能访问数据
2.4 同源策略
- 不同源的页面之间，不准互相访问数据
3.案例（创建两个网站来演示一下）
3.1 步骤
- 创建目录
qq-com 里面有一个 server.js，用来模拟QQ空间
lzy-com 里面有一个 server.js，用来模拟钓鱼网站 - qq-com
/index.html 是首页
/qq.js 是脚本文件
/friends.json 是模拟好友数据
端口监听为：8888，访问 http://127.0.0.1:8888 - lzy-com
/index.html 是首页
/lzy.js 是脚本文件
端口监听为：9999，访问 http://127.0.0.1:9999 - 使用qq.js去访问friends.json成功
使用 lzy.js 去访问friends.json 失败
3.2 host
- 除了端口号，想让域名也不一样
- 修改host即可
- window——记事本——右键：以管理员身份运行——文件——打开——C盘——windows——System32——drivers——etc——文件类型：所有文件——host——打开
不要删除默认内容
直接回车在后面加上
127.0.0.1 lzy.com
127.0.0.1 qq.com
- 意思是：
如果我访问：lzy.com，请直接请求 127.0.0.1
如果我访问：qq.com，请直接请求 127.0.0.1
IP在前，域名在后，保存 - 打开终端——ping qq.com
3.2.1 设置本地域名映射
- 通过以上步骤让
qq.com 映射到 127.0.0.1，直接访问：http://qq.com:8888/index.html
lzy.com 映射到 127.0.0.1，直接访问：http://lzy.com:9999/index.html
3.3 跨域AJAX
- 正常使用AJAX
在 qq.com:8888 里运行的JS可以访问 /friends.json
- 黑客偷数据
在 lzy.com:9999 里运行JS不能访问
浏览器需要 CORS
- 提问
1.请求发送成功了没有？
答：成功了，因为qq.com后台有log
2.黑客拿到响应了没有？
答：没有，因为浏览器不给数据给它
3.4其他疑问
- 为什么 a.qq.com 访问 qq.com 也算跨域？
答：因为历史上出现过不同公司共用域名 - 为什么不同端口也算跨域？
答：因为以前服务器很贵，出现过不同公司共用一个服务器 - 为什么两个网站IP一样也算跨域？
答：原因同上，IP可以共用 - 为什么可以跨域使用 CSS、JS 和图片等？
答：同源策略限制的是数据访问，我们引用CSS、JS和图片的时候，其实不知道其内容，只是在引用文件，不能读取内容。
标签：qq,lzy,跨域,js,访问,host,同源,com 来源： https://blog.csdn.net/qq_40282016/article/details/116494109
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。