「2022」浏览器&网络&计算机基础

ianutt

已于 2023-02-21 22:06:29 修改

阅读量86

点赞数

文章标签：前端

于 2022-09-08 10:24:37 首次发布

本文链接：https://blog.csdn.net/ianutt/article/details/126759614

版权

【网络】

HTTP协议

详解

HTTP与HTTPS区别

HTTP明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP）数据传输过程是加密的，安全性较好。

使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构）申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。

HTTP页面响应速度比HTTPS快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换3个包，而 HTTPS除了TCP的三个包，还要加上 ssl握手需要的9个包，所以一共是12个包。

http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

HTTPS其实就是建构在SSL/TLS之上的HTTP协议，所以，要比较 HTTPS 比 HTTP要更耗费服务器资源。

❗HTTP状态码

HTTP状态码400是什么意思
HTTP状态码304是什么意思？一般什么状态下会返回304

状态码最详细
 常见状态码
1xx 信息状态码
2xx 成功
3xx 重定向
4xx 客户端错误（常见）
5xx 服务器错误

200 - 请求成功。一般用于 GET 与 POST 请求。
301 - 资源被永久转移到其它URL。
302 - 资源被临时转移到其它URL。
304 - 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。（当你发出一个GET请求的时候服务器会从缓存中调用你要访问的内容，这个时候服务器就可以判断这个页面是不是更新过了，如果未更新过那么他会给你返回一个304状态码）
400 - Bad Request客户端请求的语法错误，服务器无法理解。
401 - 请求要求用户的身份认证，一般是指未被授权比如登录。
403 - Forbidden是HTTP协议中的一个状态码(Status Code)，意味着后端服务虽然成功解析了请求，但前端却没有访问该资源的权限。
404 - Not Found 服务器无法根据客户端的请求找到资源。
405 - Method Not Allowed 客户端请求中的方法被禁止。
500 - 内部服务器错误。
503 - Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。

TCP三次握手、四次挥手

【浏览器】

【计算机基础】

跨域

跨域：是指协议，域名，端口不同，其中有一个不同都会产生跨域，在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问
XHR(XMLHttpRequest)请求，如果发出去是XHR请求，也就是说发送的不是XHR就算跨域也不会报错，因为发送xhr浏览器会去限制。

那你们这个跨域问题是咋解决的？后端咋解决有了解过吗

我们这边跨域是后端解决的，后端用CORS加了个配置（在服务器配置一个跨域响应头接口）

与jsonp相比的优点：
1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
2、使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
3、 JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="btn">请求</button>
  <script src="./jquery-3.2.0.js"></script>
  <script>
    $( '#btn' ).click(function () {
      $.ajax( {
        url: 'http://test2.com/03-index.php',
        success: function ( info ) {
          console.log( info );
        }
      });
    })
  </script>
</body>
</html>

<?php
// header( 'Access-Control-Allow-Origin: *' ); // 允许任意的网站跨域
header( 'Access-Control-Allow-Origin: http://test1.com' );//允许指定网站
echo 'cors 跨域';
?>

res.setHeader("Access-Control-Allow-Headers", "client_id, Authorization, Access-Control-Allow-Headers, Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

❗跨域原理和解决方案

跨域

前端实现：

jsonp（不推荐，因为只能支持get请求，不支持post请求）
原理：利用<script>标签的src属性没有跨域限制的漏洞，只能解决get请求的跨域问题，网页可以得到从其他来源动态产生的JSON数据，jsonp请求一定需要对方的服务器做支持才可以
webpack-dev-server（Vue）
webpack-dev-server可以设置代理，前端可以在开发环境设置代理解决跨域问题

 proxy: {
   '/api': {
     target: 'http://localhost:3000',
     pathRewrite: { '^/api': '' },
     changeOrigin: true,
   },
}

document.domain

后端实现：

CORS（设置相关的响应头)（PHP端修改header）（跨域资源共享）

header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

ngnix配置代理解决跨域配置
通过Nginx来解决跨域问题
 nginx解决跨域（Vue）

...
location /api {  
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'
    if ($request_method = 'OPTIONS') {
        return 204;
		}
		proxy_pass http://192.168.12.1:8081; # 设置代理服务器的协议和地址
}
...

postMessage
原理：postMessage是HTML5 XMLHttpRequest Level 2中的API，是为数不多可以跨域操作的window属性之一，可以解决以下3个方面的跨域数据传递
①. 页面和其打开的新窗口的数据传递
②. 多窗口之间消息传递
③. 页面和嵌套的iframe消息传递
Koa设置跨域
koa 是插件机制，设置更简单，使用跨域插件即可。

import cors from "koa2-cors";
app.use(cors());

cookie、sessionStorage、localStorage 的区别

相同点：

都是在客户端存储用户数据的

不同点：

【存储大小】cookie数据大小不能超过4k；sessionStorage和localStorage的存储可以达到5M+；
【有效时间】cookie在设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失，除非主动删除数据；sessionStorage数据在关闭浏览器窗口就会被清空，不能设置过期时间；
【网络请求/安全性】cookie请求时一般会携带在header中；localStorage、sessionStorage请求时不会携带，数据保存在本地
【版本】localStorage、sessionStorage都是html5新加的属性；cookie是之前就有的属性；
【应用场景不同】Cookie：判断用户是否登录；sessionStorage：表单数据；LocalStorage：购物车

localStorage 对应 window.localStorage，sessionStorage 对应 window.sessionStorage。
localStorage 和 sessionStorage 的区别主要是在于其生存期。