十九、同源策略和CORS跨域,同步和异步,宏任务和微任务,事件轮询Event Loop

60 阅读1分钟

1. 同源策略

是一种浏览器的安全机制,如果出现协议、域名、端口三者不统一的情况,就会产生跨域。

QQ图片20230426190527.png 【补充】url的组成部分: QQ图片20230426104530.png

2. 解决跨域

解决跨域的几种方式:

  • ① 在后端的响应头中加 Access-Control-Allow-Origin:*, * 表示所有的请求都可以访问该服务
  • ② 非官方解决跨域的方案 —— jsonp,它不是真正的ajax请求,只是一个get请求,适合做查询。利用带src属性的标签(script、link)不受限制的访问外部资源,通过回调函数callback获取数据
  • ③ 服务器代理server proxy (前端webpack模块中的)
  • ④ postMessage

3. 同步和异步

JS中所有的任务可以分为2种:同步任务和异步任务

3.1 同步任务

  • 在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务
  • 缺点:容易造成阻塞

3.2 异步任务

  • 不进入主线程、而进入“任务队列”的任务,当主线程中的任务运行完了,才会从”任务队列”取出异步任务放入主线程执行
  • 异步任务:分为宏任务微任务
3.2.1 宏任务:线程直接分配
  • ① 事件绑定
  • setInterval、setTimeout
  • ③ ajax
  • ④ 回调函数
  • ⑤ Node中fs可以进行异步的I/O操作
  • script标签

QQ图片20230426201221.png

3.2.2 微任务
  • ① promise.then()
  • ② promise.catch()
  • ③ promise.finally()
3.2.3 事件轮询Event Loop

QQ图片20230426201228.png