ip地址端口同源同源策略跨域 JSONP CORS

最新推荐文章于 2024-09-27 14:39:23 发布

kjs--

最新推荐文章于 2024-09-27 14:39:23 发布

阅读量1.8k

点赞数 1

文章标签： ajax

本文链接：https://blog.csdn.net/qq_43157612/article/details/114601709

版权

IP地址

IP地址（Internet Protocol Address）
是指互联网协议地址，又译为网际协议地址
1.格式：xxx.xxx.xxx.xxx 由4组数字组成
2.每一组数字取值范围0-255包含0和255
3.每一组数字中间用点分割

IP地址作用：
IP地址被用来给链接到网络中的终端设备进行编号，具有唯一性，多个设备之间通讯都是基于IP地址
通俗理解：IP地址好比电话号码，每个电话都需要有一个号码才能打电话，同样的，一台电脑或网络设备需要一个IP地址才能进行通信

IP地址的分类
1.公有地址（Public address）：通过它直接访问因特网，例如：通过www.ip138.com查出来的地址
2.私有地址（局域网地址）：专门为组织机构内部使用，例如：192.168开头的IP地址
3.代表本机地址： 127.0.0.1

端口

端口：
英文是Port表示设备与外界通讯的出口，例如电脑QQ，微信，内网通等软件之间要进行网络通讯都需要用到端口
电脑会为这些软件都分配一个端口。
通俗理解：
电脑比作房子的话，那么端口就相当于是出入这个房子的门

端口特点：
1.端口是通过端口号来标记的，端口号是一个整数，取值范围：0-65535
2.端口只能被一个软件占用，如果其他软件要使用相同的端口就会冲突
3.端口通常是配合IP或域名一起使用，例如：http://127.0.0.1:3001 ,www.baidu.com:80

常用端口：
1.www服务的默认端口是80，一个url地址上如果不带端口，那么默认就是80，例如www.baidu.com 默认就是80
2.FTP服务的默认端口是21

同源

什么是同源？
在编程中所谓同源是指：同时满足协议相同、**域名(IP)**相同、端口相同的两个URL我们就认为它们同源

举例：我们有一个url： http://www.test.com:8080/pages/index.html
与之同源的url：
http://www.test.com:8080/api/getlist
与之不同源的url：
file:///C:/pages/index.html 不同源 (协议不同)
https://www.test.com:8080/pages/index.html (协议不同)
http://www.abc.com:8080/pages/index.html (域名不同)
http://www.test.com/pages/index.html (端口不同，不填写端口默认是80)

同源策略

什么是同源策略？
浏览器中为了安全，在非同源的两个地址中，浏览器会利用它的同源策略机制限制它们访问一些数据
同源策略是浏览器本身的一种机制

限制访问数据类型
Cookie、LocalStorage 等无法读取
DOM 无法获得
AJAX 请求在浏览器端有跨域限制

跨域

跨域与同源相反，只要在协议相同、域名(IP)相同、端口相同三个条件中有任何一个不满足的两个URL我们就认为它们会形成跨域

在Ajax请求中，形成跨域的两个地址之间访问数据时会被浏览器的同源策略做屏蔽，会出现访问不成功的问题
举例：在 http://127.0.0.1:5000/index.html中通过ajax请求 http://127.0.0.1:3001/getherolist 形成跨域

不会形成跨域的两个类型：

script 与 img 请求其他不同源地址是不会被浏览器的同源策略拦截的

Ajax跨域错误

用ajax请求http://127.0.0.1:3001/getStudentsJSONP.js就会产生跨域错误提示

 $.ajax({
                type: 'GET',
                url: 'http://127.0.0.1:3001/getStudentsJSONP.js'
       })

跨域错误提示（看到这个错误就是表示当前请求被浏览器的同源策略阻止了）

在这里插入图片描述

Ajax跨域解决方案-JSONP

JSONP跨域：
JSONP所有浏览器均可以使用包括IE6
它只支持GET跨域请求，不支持POST跨域请求
JSOPN需要服务器的支持
JSONP不属于Ajax请求
面试官在考察跨域知识的时候总喜欢问到它

jQuery实现JSNOP跨域核心代码

$.ajax({
         type: 'GET',
         url: 'http://127.0.0.1:3001/getStudentsJSONP.js',                       
         dataType: 'jsonp', // 指定dataType类型为jsonp
})

Ajax跨域解决方案-JSONP原理

JSONP实现的本质：
通过在网页上添加一个script元素去请求服务器地址
服务器将数据用函数+参数格式响应回来
浏览器执行函数，获取参数即为数据

提问：为什么JSONP只能发送GET请求，不能发送POST请求？

Ajax跨域解决方案-CORS

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）
特点：
新式浏览器都支持该功能，IE浏览器不能低于IE10
CORS需要服务器支持
由后台程序员在服务器做CORS设置即可
整个通信过程都是浏览器自动完成的，不需要前端工程师做任何介入

检验一个Api接口地址是否支持CORS跨域
打开浏览器调试工具进入NetWork
查看响应报文头中如果有以下必选项的头信息，则表示服务器开启了CORS跨域
Access-Control-Allow-Origin（必选）
Access-Control-Allow-Credentials（可选）
Access-Control-Expose-Headers（可选）