小九自助建站虚拟商城平台

当前位置： 首页 > news >正文

小九自助建站,虚拟商城平台,学做网站用什么服务器,企业基本注册信息查询单SSR/CSR#xff1a;HTML拼接#xff1f;网页源码#xff1f;SEO/交互性 SSR #xff08;server side render#xff09;服务端渲染#xff0c;是指由服务侧#xff08;server side#xff09;完成页面的DOM结构拼接#xff0c;然后发送到浏览器#xff0c;为其绑定状…SSR/CSRHTML拼接网页源码SEO/交互性 SSR server side render服务端渲染是指由服务侧server side完成页面的DOM结构拼接然后发送到浏览器为其绑定状态与事件成为完全可交互页面的过程。CSRclient side render客户端渲染是指由客户端client sideJS完成页面和数据的拼接生成DOM结构再交由浏览器渲染成页面的过程。 浏览器从输入url到渲染页面 过程 合成 URL-本地缓存/拦截请求-DNS解析IP/端口号域名缓存 TCP-HTTP请求 DNS 解析域名系统Domain Name System DNS 查找数据缓存服务中是否缓存过当前域名信息有则直接返回 否则会进行 DNS 解析返回域名对应的 IP 和端口号 如果没有指定端口号http 默认 80 端口https 默认 443。 DNS协议属于应用层协议一般是运行在UDP协议之上使用53端口。 OSI模型和TCP/IP协议 ​​​ HTTP协议无状态的协议Cookie/Session识别-状态 无状态是指服务端无状态是指服务端不会存储每次的会话信息对于客户端每次发送的请求都认为它是一个新的请求上一次会话和下一次会话没有联系。 Http和Https 端口80/443 HTTPS  HTTP  SSl/TLS协议传输层 用SSL/TLS对数据进行加密和解密 SSL的全称是Secure Sockets Layer即安全 套接 层协议 TLS的全称是Transport Layer Security即安全 传输 层协议 明文/密文 对称加密 数据 非对称加密 秘钥 服务端的公钥和私钥非对称加密 客户端生成的随机秘钥对称加密 常见的请求方式 GET/POST HEAD报文首部验证URI有效性 PUT/DELETE(报文文件) OPTIONS查询URI支持的HTTP方法 HTTP标头 Connection: keep-alive  TCP 就会一直保持连接。 在隔开一段时间之后发送几次没有数据内容的网络请求来判断当前连接是不是应该继续保留。 可能会造成大量的无用途连接白白占用系统资源 Cache-Control public响应可以被任何缓存客户端/代理服务器缓存 private响应只能被客户端缓存 no-cache不应直接使用缓存的副本而是需要先进行验证 no-store响应和请求都不应被缓存即不在本地存储中保存副本。 max-ageseconds秒 Last-Modified/If-Modified-Since 如果将资源的最后修改日期Last-ModifiedIf-Modified-Since,会 304Not Modified ETag/If-None-Match服务器生成的资源标识符哈希值/实体标签 使用了该头部即为条件请求若请求标识符资源的当前标识符则304 If-None-Match: d41d8cd98f00b204e9800998ecf8427e 主体服务端响应/客户端请求 Content-Length字节Byte为单位 Content-Length: 123 Content-Type/Accepttype/subtype ;parameter 应用程序类型application application/x-www-form-urlencoded ​​​​​​​默认URL encoded表单数据被转换成键值对 application/jsonJSON 数据axios传递对象时默认 application/xmlXML 数据 多媒体类型multipart multipart/form-data用于在 HTML 表单上传文件时的数据类型。 文本类型text text/plain纯文本文件例如 .txt 文件。 text/htmlHTML 文档用于网页。 text/css层叠样式表文件控制网页的样式。 text/xmlXML 数据。 Content-Encoding/Accept-Encoding Accept-Encoding: gzip, deflate 请求头 User-Agent发起请求的用户代理浏览器/应用程序 Host访问的主机名端口 Origin跨域请求时指示请求的来源 Origin: https://www.example.com  Connection: keep-alive​​​​​​​ Accept-Language客户端 偏好的语言。 Accept-Language: en-US,en;q0.5 凭证Credentials 例如 cookies、HTTP 认证用户名和密码等 Authorization在需要身份验证的情况下包含用于认证的凭据 Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l withCredentials是否发送凭据 Cookie: sessionidabc123; usernamejohndoe​​ 响应头 Set-Cookiesession_idabcd123; Path/; HttpOnly ​​​​​Access-Control-Allow-Origin​​​​​​​ Access-Control-Allow-Credentials是否允许在跨域请求中包含凭据Credentials ServerHTTP服务器的信息 Server: Apache/2.4.29 (Ubuntu) Location客户端重定向的URL。 Location: https://www.example.com/new-page Content-Range: bytes start-end/total 分段下载 Content-Disposition如何显示响应体通常用于下载文件 Content-Disposition: attachment; filenamedocument.pdf​​​​​​​ 缓存Cache-Controlmax-age​​​​​​​HTTP/1.1​​​​​​​ExpiresHTTP/1.0 http版本 1.0-1.1一次传输多个文件默认Connection: keep-alive http1.x解析基于文本 http2.0采用二进制格式新增特性 多路复用、header压缩、服务端推送(静态html资源) HTTP/2和HTTP/3主要支持 并发处理 和 减少延迟 方面。​​​​​​ HTTP/1.0 短连接关闭连接 无持久化单个连接单个请求/响应 无管道化无法并发发送请求 HTTP/1.1 持久单个连接不同时间多个请求/响应 管道化 分块/流式传输边收边处理 HTTP/2 二进制传输更小的帧 多路复用单个连接同时多个请求/响应 头部压缩 可服务器推送 HTTP/3 QUIC协议UDP代替TCP时延拥塞 传输层也能多路复用 0-RRT握手 改进头部压缩 http状态码 1xx Informational 信息接受请求正在处理 100 Cotinue 2xx Successful成功请求正常处理完毕 200 OK有返回内容 201 Created服务器创建新资源 204 No Content无返回内容 206 Partial Content处理了部分请求返回了相应的数据范围【分段下载】 3xx - Redirection重定向附加操作已完成请求 301 Moved Permanently永久重定向   服务器返回此响应对 GET 或 HEAD 请求的响应时会自动将请求者转到新位置。 302 Found临时重定向 A.cookie 失效 有 CORS 问题 B.代理服务器的目标地址请求的不对config/index.js 配置的 proxy 的 target  //响应拦截器 if (error.response error.response.status 302) {if (window.location.host expenseexternal.xx.cn) {window.location.href https:///passport-cloud.xxx.cn/login?service encodeURIComponent(window.location.href)} } 304 Not Modified304资源缓存 表示客户端发送了一个带有条件的请求通常If-Modified-Since或If-None-Match 4xx Client Error客户端错误 服务器无法处理请求 400 Bad Request请求无效服务器无法理解 401 Unauthorized请求未经授权需要提供凭证 403 Forbidden服务器理解请求但拒绝授权访问 404 Not Found请求的资源不存在 5xx Server Error服务器错误服务器处理请求出错 500 Internal Server Error服务器遇到了错误无法完成请求 502 Bad Gateway作为代理或网关的服务器从上游服务器接收到无效响应 503 Service Unavailable连接超时 强制刷新重新请求 后端查看配置 Nginx 反向代理参数有没有问题或者重启 Nginx 服务 缓存 强制缓存Cache-Controlmax-age​​​​​​​HTTP1.1​​​​​​​Expires1.0 ​状态码为灰色的请求则代表使用了强制缓存请求对应的Size值则代表该缓存存放的位置分别为from memory cache 和 from disk cache。 浏览器读取缓存的顺序为memory – disk。访问URL– 200 – 关闭标签页 – 重新打开URL– 200(from disk cache) – 刷新 – 200(from memory cache) 协商缓存If-None-Match/If-Modified-Since 存储​​​​​​​js/图片内存刷新css硬盘渲染 本地存储 Cookie客户端内存/用户硬盘 属性 必选NameValue Domain域名或 ip作用域无法跨域与端口无关默认是当前域名 一级域名和二级域名之间是允许共享使用的 如果设成 .example.com那么子域名 a.example.com 和 b.example.com 都可以使用.example.com 的 cookie反之不可以。 Path指定 cookie 在哪个路由下生效默认 / Expires/Max-Age两种存储类型的Cookie会话性默认与持久性 ​​​​​​​会话性cookie仅保存在客户端内存中并在隐私浏览模式中用户关闭  整个 浏览器时失效 会话恢复​​​​​​​/恢复上次打开的标签页​​​​​​​导致浏览器保留会话信息包括Session Cookie 迫使服务器为 session 设置了一个失效时间 当距离客户端上一次使用 session 的时间超过这个失效时间时 服务器就认为客户端已经停止了活动才会把 session 删除以节省存储空间​​​​​​​ 持久性Cookie会保存在用户的硬盘中txt 直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效 Max-Age失效时间单位秒 为负数该 cookie 为临时 cookie 关闭浏览器即失效 如果为 0表示删除该 cookie 。默认为 -1。 如果 Max-Age 和 Expires 同时存在以 Max-Age 为准。 HttpOnly为 true 时只有 http 能读取 js不能读防止恶意脚本通过Cookie 攻击 但能通过 Application 中手动修改 cookie所以还是没办法防止 XSS 攻击 Secure默认为false为true表示只有 https 的请求可以携带 SameSite限制第三方 URL 是否可以携带 cookieChrome51 新增chrome80 强制 一个站点可以包含多个网页例如个人博客 Strict仅允许发送同站点请求的 cookie Lax默认在顶级导航和POST请求中发送Cookie但在跨站点的GET请求中不会发送 顶级导航 指的是从一个站点的一个URL跳转到另一个站点的URL通常是通过点击链接或输入网址来实现的。 None任意发送 cookie但需要同时设置 Secure即必须采用 https Priority优先级 Chrome Low/Medium/High当 cookie 数量超出时低的会优先被清除 ​​​​​​​js操作cookie ​​​​​​​读/改 document.cookieHttpOnly为 true 时只有 http 能读取 js不能读取 设置 public /index.html /script  scriptdocument.cookie ssoticketST-xx-cn/script 删除expiresnew Date(0) new Date(0) 970年1月1日UTC时间0代表的是 Unix 时间戳的起始时间 document.cookie ‘cookieName; expires${new Date(0)}; path/;’; 基本刷新只是从本地硬盘中重新拿取数据到浏览器 跨域请求 服务端设置cookieSameSiteNone任意发送cookieSecuretruehttps 响应头Access-Control-Allow-Credentialstrue允许发送Credentials 请求头withCredentialstrue会发送Credentials session存储在服务端首次会话创建Cookiename/value‘JSESSIONID’/id 大小/数量一般单个cookie 保存的数据大小不超过 4kb单个域名最多保存 30 个 cookie浏览器不同有差异session 没有大小和数量限制 存储格式cookie localstorage只能存字符串session 可以存对象 Token存在cookie/localstorage http://www.example.com/user?tokenxxx 服务端不用存储session 避开同源策略token 完全由应用管理 移动端对cookie支持不友好存于localstorage WebStorage localStorage localStorage.setItem(uname,zwq) localStorage.getItem(uname) localStorage.key(0) localStorage.removeItem(uname) localStorage.clear() sessionStorage IndexDB运行在浏览器的非关系型数据库   ​​​​​​​ 前端/后端路由 位置 前端路由处理在浏览器中展示的页面之间的导航单页面应用程序SPA中常见如React或 Vue Router。后端路由处理服务器端资源的请求和响应确定服务器如何处理不同的 URL 请求并返回适当的数据或页面。这是服务器端框架如Express、Django中的基本组成部分。 导航方式 前端路由更改 URL 的一部分而不会重新加载整个页面。这使得用户体验更加流畅因为只有局部内容会被刷新使用浏览器的前进后退键的时候会重新发送请求没有合理地利用缓存。单页面无法记住之前滚动的位置无法在前进后退的时候记住滚动的位置。后端路由在后端路由中当用户点击链接或发出请求时整个页面可能会重新加载因为服务器会根据请求的 URL 来返回相应的页面或资源。 SEO搜索引擎优化 前端路由由于前端路由一般是基于单页面应用程序搜索引擎的爬虫可能会遇到困难因为页面内容大部分是通过 JavaScript 动态生成的。需要额外的工作来优化 SEO。后端路由后端路由通常更利于 SEO因为页面内容在服务器端就已经存在搜索引擎可以直接索引。 同步 js标签跨域、url img srclink href 异步 web-worker创建分线程适用于计算密集型任务 当在 HTML 页面中执行脚本时页面的状态是不可响应的直到脚本已完成。 web worker 是运行在后台的 JavaScript独立于其他脚本不会影响页面的性能。 Web Worker 线程无法直接访问 DOM文档对象模型元素、操作页面内容也不能访问浏览器的 Window 和 Document 对象。这是为了防止 Web Worker 影响主页面的交互 index.js为加载到html页面中的主线程(js文件) work.js为在index中创建的分线程 index.js 创建分线程
var w new webwork(work.js)//创建 Web Worker 对象 向子线程发送数据 w.postmesage(数据) work.js onmessage function(ev) {console.log(ev);//接受主线程发送过来的ev.data数据this.postMessage(数据)//通过 postmesage(数据) 向主线程发送数据 }通过w.onmessagefunction(ev){ev.data} ev.data 接受 a 的值. w.terminate();//终止 Web Worker异步ajax、websock协议 ajax是异步的技术术语最早的api是xhrXMLHttpRequest axios 同构同样的代码在nodejs端浏览器端都可用 在浏览器用xhrNode.js中使用Node的内置http模块 // 在浏览器中根据其Content-Type头信息自动转换数据 axios.get(/api/data).then(response {// response.data 将是一个JavaScript对象 });// 在Node.js中手动设置响应数据类型 axios.get(/api/data, { responseType: json }).then(response {// response.data 将是一个JavaScript对象 }); axios 新版本也支持了fetch第三方库都是基于原生API的所以axios也还是基于xhr的 fetch es6 api基于promise简单易用  window.fetch(url, { method: get}) //fetch() 返回响应的promise // 第一个then 设置请求的格式.then(res return res.json()) // 第一层then返回的是:响应的报文对象 .then((data) { //第二层:如果想要使用第一层的数据,必须把数据序列化 res.json() 返回的对象是一个 Promise对象再进行then()!– data为真正数据 –}).catch(e console.log(Oops, error, e)) 回调函数参数为函数且满足条件才执行该参数函数 隐式return 原promise对象/ 显式return 非promise会包装成promise then/catch/finally/async 创建Promise实例 await 值Promise.resolve(值) Promise.resolve(值)如果该值本身就是一个 promise实例将直接被返回 Promise.reject(值) constructor的函数参数起始函数同步立即执行 起始函数的函数参数均可选resolve 起始函数成功时调用、reject失败时调用 状态都没有的话状态为pending[待定]初始状态 //​​什么都不输出​​​​​ new Promise((){}).then((){console.log(then) }).finally((){console.log(finally) }) Promise Promise.prototype(实例)方法 then回调函数 resolveFn的形参resolve的参数 catch回调函数 rejectFn的形参reject的参数 finally回调函数 Promise并发方法 allSettled() 多个不依赖于彼此成功完成的异步任务时或者想知道每个 promise 的结果时 all当异步操作之间不存在结果的依赖时all中的所有方法是一同执行的 const promise1 Promise.resolve(3); const promise2 42; const promise3 new Promise((resolve, reject) {setTimeout(resolve, 100, foo);//setTimeout(function[, delay, arg1, arg2, …]); });Promise.all([promise1, promise2, promise3]).then((values) {console.log(values); }); // Expected output: Array [3, 42, foo]mappromise.reslove(catch) catch方法返回的promise实例会被promise.reslove()包裹这样传进promise.all的数据都是resolved状态的。 let p1 Promise.resolve(1) let p2 Promise.resolve(2) let p3 Promise.resolve(3) let p4 Promise.resolve(4) let p5 Promise.reject(error) let arr [p1,p2,p3,p4,p5];let all Promise.all(arr.map((promise)promise.catch((e){console.log(错误信息e)}))) all.then(res{console.log(res)}).catch(errconsole.log(err)); async/await函数 Promise.resolve(a).then(b {// do something}).then(c {// do something})//等价于 async () {const a await Promise.resolve(a);const b await Promise.resolve(b);const c await Promise.resolve©; }async关键字函数 await 操作符promise对象 promise对象变成reject状态时整个async函数会中断 处理异常 try-catch 块 async function asyncFunc() {try {await new Promise(function (resolve, reject) {throw Some error; // 或者 reject(Some error)});} catch (err) {console.log(err);// 会输出 Some error} } asyncFunc(); 宏任务微任务事件循环event loop 微任务microtask(异步)Promise async/await 微任务是宏任务 宏任务macrotask setTimeout,setInterval定时事件Ajax,DOM事件script 脚本的执行、 I/O 操作、UI 渲染等。 微任务是JS级别的宏任务是宿主级别的是包含关系不是先后关系。 1.macro task先执行 2.当前所有micro task逐条执行 3.下一条macro task执行” 重复上面loop setTimeout(delay0)setImmediate下个Event Loop执行 setTimeout( console.log(5))new Promise(resolve {resolve()console.log(1) }).then(_ {console.log(3) }).finally(_{console.log(4) })console.log(2) // 1 2 3 4 5 url分割url和参数 参数分隔符 #锚点id http://example.com/page?param1value1param2value2#section1 跨域 jsonpjs、cssimg静态资源仅get方式 现在浏览器兼容性高了逐步淘汰了 JSONPJSON With Padding是利用script srcXXX跨域 因为是动态创建script标签所以它只支持get请求不支持post请求 代理服务器服务器间不用同源 正向代理主要是用来解决访问限制问题; 反向代理则是提供负载均衡、安全防护等作用。 Nginx反向代理​​​​​​​类似cors字段设置proxy_pass 前端应用运行在 http://localhost:3000跨域访问后端 API 它运行在 http://localhost:8000 server {#HTTP 协议来监听请求应该使用 listen 80;listen 80;server_name localhost;location /api {proxy_pass http://localhost:8000;# 允许来自前端应用的跨域请求add_header Access-Control-Allow-Origin http://localhost:3000;add_header Access-Control-Allow-Methods GET, POST, OPTIONS;add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range;# 支持 OPTIONS 请求用于预检请求if ($request_method OPTIONS) {add_header Access-Control-Allow-Origin http://localhost:3000;add_header Access-Control-Allow-Methods GET, POST, OPTIONS;add_header Access-Control-Allow-Headers DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range;# 响应预检请求直接返回 204 No Contentadd_header Content-Length 0;add_header Content-Type text/plain charsetUTF-8;return 204;}} } proxy vue.config.js const configStatic {proxy: {/test: {target: http://www.xx.cn,// 设置目标服务器的地址changeOrigin: true,pathRewrite: {^/test: /}} }module.exports configStaticcors浏览器IE10以下不支持 服务端Access-Control-Allow-Origin preflight预检查跨域复杂请求前OPTIONS 请求 预检请求是指浏览器在发送跨域请求之前会先发送一个 OPTIONS 请求用于询问服务器是否接受实际的请求。 预检请求主要用于对复杂请求例如包含自定义请求头或使用非简单标头字段的请求进行安全验证。 简单请求GET/HEAD/POSTContent-Typetext/plain,multipart/form-data,application/x-www-form-urlencoded 条件2除了被允许的自定义请求头例如X-PINGOTHER请求头仅包含一些简单标头字段如Accept、Accept-Language、Content-Language、Content-TypeRange。 其中Content-Type 的值仅限于下列三者之一 text/plain无格式正文(可以有效避免XSS漏洞)multipart/form-data键值对型数据application/x-www-form-urlencodedURL encoded默认 应用 当服务端没有设置跨域时可以将json伪装成text/plain 原理 包装成简单请求以躲过预检查。但是有些客户端或者代理还是会预检查 安全 浏览器对于 JSON 响应的默认处理机制是自动将其解析为 JavaScript 对象。 当浏览器接收到响应时如果响应的 Content-Type 是 application/json 或没有指定 Content-Type浏览器会自动将响应体解析为 JSON JavaScript 对象如果是恶意代码可能会被执行导致安全漏洞或攻击。 通过将 JSON 响应伪装成 text/plain 类型可以避免浏览器将响应自动解析为 JavaScript 对象的默认行为。 这样一来JavaScript 代码需要手动对响应进行解析确保数据的安全性和正确性。这种伪装可以提供额外的安全层防止对于响应的自动解析可能带来的安全风险。 //请求头 GET /example HTTP/1.1 Host: example.com Accept: text/plain //响应头 HTTP/1.1 200 OK Content-Type: text/plain //响应体 {foo: bar} 跨源资源共享CORS - HTTP | MDN Cross-Origin Resource Sharing (CORS) - HTTP | MDN websocketHTML5新特性TCP 兼容性不好只适用于主流浏览器和IE10  HTML5 的一个持久化的协议它实现了浏览器与服务器的全双工通信 WebSocket 和 HTTP 都是应用层协议都基于 TCP 协议。 WebSocket 在建立连接时需要借助 HTTP 协议连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了 原生WebSocket API使用起来不太方便 Socket.io它很好地封装了webSocket接口提供了更简单、灵活的接口也对不支持webSocket的浏览器提供了向下兼容。 本地文件socket.html向localhost:3000发生数据和接受数据 // socket.html scriptlet socket new WebSocket(ws://localhost:3000);socket.onopen function () {socket.send(我爱你);//向服务器发送数据}socket.onmessage function (e) {console.log(e.data);//接收服务器返回的数据} /script // server.js let express require(express); let app express(); let WebSocket require(ws);//记得安装ws let wss new WebSocket.Server({port:3000}); wss.on(connection,function(ws) {ws.on(message, function (data) {console.log(data);ws.send(我不爱你)}); }) web安全 XSS跨站脚本攻击Cross-Site Scripting登陆时执行脚本读取 解决 url参数使用encodeURIComponent方法转义尽量不用InnerHtml插入HTML内容 CSRF跨站请求伪造Cross-site request forgery凭证请求 解决添加验证码、使用token SQL注入攻击交表单/输域名 执行SQL命令 解决表单输入时通过正则表达式将一些特殊字符进行转换 DDoS攻击分布式拒绝服务 Distributed Denial of Service请求过载 解决 限制单IP请求频率。检查特权端口的开放