跨域与jsonp的原理，跨域的解决方式，发送到URL到页面加载发生了什么，三次握手，四次挥手，Vue中的methods,watch,computed的区别

最新推荐文章于 2024-08-23 10:43:19 发布

会撸串的傻狍子

最新推荐文章于 2024-08-23 10:43:19 发布

阅读量159

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/L990614/article/details/112970571

版权

总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

跨域与Jsonp的原理

跨域的概念：

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口号完全相同。协议，域名，端口号不同则为跨域。

jsonp的概念：

动态创建< script >标签，利用script标签的src不受同源策略的约束来跨域获取数据
jsonp由两部分组成：回调函数和数据，回调函数是当响应来到时应该在页面中调用的函数，回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。

跨域的解决方式

1. jsonp实现原理

利用动态创建script标签请求后端接口地址，然后传递callback，后端经过数据处理，返回callback函数调用的形式，callback中的参数就是json

优点：浏览器兼容性好

缺点：只支持get方式请求

2. 代理（proxy）

proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。

vue脚手架中的vue.config.js文件（没有就自己创建），在proxy中设置跨域

//在项目根目录下创建vue.config.js文件
module.exports = {
devServer:{
proxy:"url"
	}
}

3. 设置Access-Control-Allow-Origin

res.setHeader('Access-Control-Allow-Origin'，'*')

4. CORS（Cross-Origin Resource Sharing）跨域资源共享

使用自定义http头部允许服务器与浏览器建立联系，决定请求响应成功
现代浏览器支持跨域资源请求的一种最常见的方式
CORS定义一种跨域访问机制，让Ajax实现跨域访问，只需要向服务器发送一个请求标头

优点：后端工程师在请求页面中配置，支持所有请求方式。

缺点：浏览器支持版本有限

发送URL到页面加载发生了什么

1. 过程：

DNS解析（解析域名，解析出对应的IP地址）
TCP连接（三次握手在tcp连接中）
发送http请求
处理请求返回数据
渲染页面
连接结束

2. http状态码

服务器返回响应码介绍
   readyState为响应码，响应码共5个：
       0:未初始化
       1:向服务器发送请求
       2:服务器已经接收请求
       3:服务器正在处理数据
       4:服务器准备就绪

服务器http返回的状态码
   http返回的状态码有以下几种
       1开头的 （临时响应）表示临时响应并需要请求者继续执行操作的状态代码
       2开头的  （成功） 成功处理了请求的状态码。200 – 服务器成功返回网页
       3开头的 （重定向） 要完成请求，需要进一步操作
       		301（永久重定向）请求的网页已永久移动到新位置、
       		302 （临时移动） 暂时重定向
       		304 （未修改）自从上次请求后，请求的网页未修改过
      	4开头的 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
      			404 – 请求的网页不存在
      	5开头的 （服务器错误）表示服务器在尝试处理请求时发生内部错误，
      					这些错误可能是服务器本身的错误，而不是请求出错
      			500 （服务器内部错误）服务器遇到错误，无法完成请求。
      			503 （服务不可用）服务器目前无法使用（由于超载或停机维护）这只是暂时状态

3. 三次握手（建立连接之前）