跨域、 递归

目录

跨域

“源”是什么

同源策略

解决跨域问题

跨域方案之CORS

 跨域方案之JSONP

JSONP原理

 递归

递归的概念

---

跨域

“源”是什么

源：是由 协议、主机名、端口号组成的

协议：http、https、file等协议

主机名：服务器的IP地址，比如127.0.0.1、绑定到服务器的域名，比如www.xxx.com

端口号：0~65535 之间的一个数组，每个服务器使用的端口，不可以有冲突，http协议默认的端口号是80，https默认端口号是443

同源策略

1、同源，指的是两个源相同的协议、主机名、端口号相同

2、同源策略，是浏览器的一种保护机制，都要去遵守的一种策略

3、如果非同源，共有以下三种行为受到限制

​​​​​ 1、DOM无法操作（A网页和B网页的url非同源，那么不能相互操作对方的DOM）

        2、Cookie无法操作（A、B两个网站非同源，则无法操作对方的Cookie）

        3、Ajax请求无效（打开页面的url和请求的接口非同源，则Ajax请求无效，也就是会报错，不能得到服务端的响应结果）
 

4、违反了同源策略的请求，就是跨域请求 

解决跨域问题

1、解决跨域问题，就是再响应头里设置允许跨域的地址访问服务器

 

跨域方案之CORS

1、由于XHR对象被W3C标准化之后，提出了很多XHR Level2的新构想，其中新增CORS跨域资源共享。

2、浏览器升级后开始支持CORS方案，从IE10开始支持。

3、CORS方案，就是通过服务器设置一系列响应头来实现跨域。而客户端不需要做什么额外的事情。

4、CORS才是解决跨域的真正解决方案。它是标准。

5、实际开发中，可以使用 第三方模块 cors 来解决跨域问题

1、下载安装cors：npm install cors

2、加载cors：const cors = require('cors');

3、注册为中间件：app.use(cors());

 跨域方案之JSONP

1、是程序员被迫想出来的解决跨域方案

2、JSONP方案和Ajax没有任何关系

 3、JSONP方案只支持GET请求

4、JSON没有浏览器兼容问题，任何浏览器都支持

JSONP原理

 1、HTML标签的src属性，不受跨域访问的影响

        <img src="其他源的图片" />

        <script src="其他源的JS代码"></script>

2、JSONP的实现

客户端先准备一个函数，比如 abc，并且设置好形参，准备接收响应数据

客户端通过script标签的src属性，向接口发送请求，并传递 callback=abc 参数

服务端响应一个字符串 abc({ "status": 0, "message": "登录成功" })

客户端将服务器返回的字符串当做JS代码解释，从而实现跨域 

 递归

递归的概念

在编程语言中，函数直接或者间接调用函数本身，则该函数称为递归函数

简单的来说，递归就是函数自己调用自己，因为是自己调用自己，所以容易出现死循环，所以使用递归的时候一般会注意两个控制条件

1、设置调用条件，满足条件，则函数调用自己

2、设置跳出条件，满足条件，则跳出函数的调用