前端笔记2022-01-05

2022-01-05

跨域解决方案

一、JSONP解决跨域

JSONP是利用script中的src无跨域限制来实现，需要后端的支持，并且只能进行get请求。
1、动态创建一个script标签

let script = document.createElement('script);

2、设置script标签中的src属性，将要请求的地址以及回调函数赋值给src

script.src = 'http://www.xxx.com/home/callback=callbackName';
let callbackName = function(data) {
    // 获取到data
}

3、将script标签添加到dom中

document.body.appendChild(script);

4、后端服务器对请求的路由进行设置

router.get("/testAJAX" , function (req , res) {
		console.log("收到请求");
		var callback = req.query.callback;
        var data = {
            ......
		}
		res.send(callback+"("+JSON.stringify(data)+")");
	});

5、前端根据callback返回的callback+"("+JSON.stringify(data)+")" 自动执行该代码，相当于调用callbackName函数，从而获取到后端返回的data数据。

二、CORS解决跨域

CORS全称为“跨域资源共享”，允许浏览器向服务器发出XMLHttpRequest请求。浏览器对于简单请求和非简单请求有区别。
1、对于简单的请求，浏览器直接发起cors请求，会在请求头中添加一个Origin字段，表示该请求的来源。
2、服务器根据这个Origin的值判断是否允许同意这次请求。
3、cors的响应头字段Access-Control-Allow-Origin是必选字段，该字段设置为一个具体的源表示只有该源才可以同意跨域请求，如果该字段设置为一个“*”，那么表示任何源都可以进行跨域请求。

代码

1、实现sleep函数

sleep(1000).then( () => {
	console.log('hello)
})

function sleep(delay) {
	return new Promise( resolve => {
		setTimeout( resolve, delay)
	})
}

2、实现连续子数组的最大和
输入: nums = [-2,1,-3,4,-1,2,1,-5,4]
输出: 6
解释: 连续子数组 [4,-1,2,1] 的和最大，为 6。

var maxSubArray = function(nums) {
    let pre = 0, maxAns = nums[0];
    nums.forEach((x) => {
        pre = Math.max(pre + x, x);
        maxAns = Math.max(maxAns, pre);
    });
    return maxAns;
};

3、遍历DOM树，并且打印出每个节点的tagName

function traversalDom(element) {
	console.log(element.tagName);
	element = element.firstElementChild;
	while(element) {
		traversalDom(element)
		element = element.nextElementSibling;
	}
}