HTTP协议 HTTP简介HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1990年提出，经过几年的使用与发展，得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版，HTTP/1.1的规范化工作正在进行之中，而且HTTP-NG(Next Generation of HTTP)的建议已经提出。HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。简言之：HTTP协议是一个文档下载协议主要特点1、简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。2、灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。3.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。4.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。5、支持B/S及C/S模式。HTTP之URLHTTP使用统一资源标识符（Uniform Resource Identifiers, URI）来传输数据和建立连接。URL是一种特殊类型的URI，包含了用于查找某个资源的足够的信息URL,全称是UniformResourceLocator, 中文叫统一资源定位符,是互联网上用来标识某一处资源的地址。以下面这个URL为例，介绍下普通URL的各部分组成：http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name从上面的URL可以看出，一个完整的URL包括以下几部分：1.协议部分：该URL的协议部分为“http：”，这代表网页使用的是HTTP协议。在Internet中可以使用多种协议，如HTTP，FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符2.域名部分：该URL的域名部分为“www.aspxfans.com”。一个URL中，也可以使用IP地址作为域名使用3.端口部分：跟在域名后面的是端口，域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分，如果省略端口部分，将采用默认端口4.虚拟目录部分：从域名后的第一个“/”开始到最后一个“/”为止，是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”5.文件名部分：从域名后的最后一个“/”开始到“？”为止，是文件名部分，如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止，是文件部分，如果没有“？”和“#”，那么从域名后的最后一个“/”开始到结束，都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分，如果省略该部分，则使用默认的文件名6.锚部分：从“#”开始到最后，都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分7.参数部分：从“？”开始到“#”为止之间的部分为参数部分，又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数，参数与参数之间用“&”作为分隔符。HTTP请求方法根据HTTP标准，HTTP请求可以使用多种请求方法。HTTP1.0定义了三种请求方法： GET, POST 和 HEAD方法。HTTP1.1新增了五种请求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法。GET 请求指定的页面信息，并返回实体主体。 HEAD 类似于get请求，只不过返回的响应中没有具体的内容，用于获取报头 POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST请求可能会导致新的资源的建立和/或已有资源的修改。 PUT 从客户端向服务器传送的数据取代指定的文档的内容。 DELETE 请求服务器删除指定的页面。 CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器。 OPTIONS 允许客户端查看服务器的性能。例如：AJAX进行跨域请求时的预检。 TRACE 回显服务器收到的请求，主要用于测试或诊断。HTTP之状态码状态代码有三位数字组成，第一个数字定义了响应的类别，共分五种类别:1xx：指示信息--表示请求已接收，继续处理2xx：成功--表示请求已被成功接收、理解、接受3xx：重定向--要完成请求必须进行更进一步的操作4xx：客户端错误--请求有语法错误或请求无法实现5xx：服务器端错误--服务器未能实现合法的请求常见状态码：200 OK //客户端请求成功 400 Bad Request //客户端请求有语法错误，不能被服务器所理解 401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用 403 Forbidden //服务器收到请求，但是拒绝提供服务 404 Not Found //请求资源不存在，eg：输入了错误的URL 500 Internal Server Error //服务器发生不可预期的错误 503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常更多状态码http://www.runoob.com/http/http-status-codes.htmlHTTP之请求消息Request客户端发送一个HTTP请求到服务器的请求消息包括以下格式：请求行（request line）、请求头部（header）、空行和请求数据四个部分组成。请求行以一个方法符号开头，以空格分开，后面跟着请求的URL和协议的版本。Get请求例子，使用Charles抓取的request：GET /562f25980001b1b106000338.jpg HTTP/1.1 Host img.mukewang.com User-Agent Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 Accept image/webp,image/*,*/*;q=0.8 Referer http://www.imooc.com/ Accept-Encoding gzip, deflate, sdch Accept-Language zh-CN,zh;q=0.8第一部分：请求行，用来说明请求类型,要访问的资源以及所使用的HTTP版本.GET说明请求类型为GET,[/562f25980001b1b106000338.jpg]为要访问的资源，该行的最后一部分说明使用的是HTTP1.1版本。第二部分：请求头部，紧接着请求行（即第一行）之后的部分，用来说明服务器要使用的附加信息从第二行起为请求头部，HOST将指出请求的目的地.User-Agent,服务器端和客户端脚本都能访问它,它是浏览器类型检测逻辑的重要基础.该信息由你的浏览器来定义,并且在每个请求中自动发送等等第三部分：空行，请求头部后面的空行是必须的即使第四部分的请求数据为空，也必须有空行。第四部分：请求数据也叫主体，可以添加任意的其他数据。这个例子的请求数据为空。HTTP之响应消息Response一般情况下，服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息。HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。第一部分：状态行，由HTTP协议版本号， 状态码， 状态消息 三部分组成。第一行为状态行，（HTTP/1.1）表明HTTP版本为1.1版本，状态码为200，状态消息为（ok）第二部分：消息报头，用来说明客户端要使用的一些附加信息第二行和第三行为消息报头，Date:生成响应的日期和时间；Content-Type:指定了MIME类型的HTML(text/html),编码类型是UTF-8第三部分：空行，消息报头后面的空行是必须的第四部分：响应正文，服务器返回给客户端的文本信息。空行后面的html部分为响应正文。阿帕奇服务器测试安装：xmapphttps://www.apachefriends.org/index.htmlapache开启对put请求的支持1.在httpd.conf中把下面两行的注释去掉（先看看有没有这两个模块，应该有的）LoadModule dav_module modules/mod_dav.soLoadModule dav_fs_module modules/mod_dav_fs.soInclude "conf/extra/httpd-dav.conf"2. extra/httpd-dav.confDavLockDB "D:\xampp\htdocs" Alias /sites "D:\xampp\htdocs" <Directory "D:\xampp\htdocs"> Dav On </Directory> RESTFULL 接口协议CURD：查询 get url?name=121 200更新 POST/PUT url 删除 DELELE url新增 POST/PUT url研究表明：不适合

跨域请求如何携带cookie 前言最近在参加面试找工作，陆陆续续的面了两三家。其中面试官问到了一个问题：如何解决跨域问题？我巴巴拉拉的一顿说，大概了说了四种方法，然后面试官紧接着又问：那跨域请求怎么携带 cookie 呢？（常规的面试套路，一般都会顺着你的回答往深了问）由于之前的项目都是同源的，不牵涉跨域访问，所以一时没有回答出来，后来研究了下，所以有了这篇文章。阅读本文，你将学到：1.学会`withCredentials`属性； 2.学会`axios`配置`withCredentials`； 3.学会设置`Access-Control-Allow-Origin`属性； 4.学会设置`Access-Control-Allow-Credentials`属性； 5.学会解决跨域请求携带源站cookie的问题；一. 搭建一个跨域请求的环境思路：使用 express 搭建第一个服务A( http://localhost:8000 )，运行在8000端口上；A服务托管index.html(用于在前端页面发送网络请求)文件；在A服务中写一个处理请求的路由，加载index.html页面时，种下 cookie (这里种cookie为了在请求B服务时携带上);使用 express 搭建第二个服务B( http://localhost:8003 )，运行在8003端口上；在A服务托管的index.html页面去请求B服务，然后把 cookie 传过去；先看下代码结构，相对比较的简单：A服务的代码： // src/app1.js const express = require("express"); const app = express(); // `index.html` 加载时会请求login接口 // 设置`cookie` app.get("/login", (req, res) => { res.cookie("user", "jay", { maxAge: 2000000, httpOnly: true }); res.json({ code: 0, message: "登录成功" }); }); // 此接口是检测`cookie`是否设置成功，如果设置成功的话，浏览器会自动携带上`cookie` app.get("/user", (req, res) => { // req.headers.cookie: user=jay const user = req.headers.cookie.split("=")[1]; res.json({ code: 0, user }); }); // 托管`index.html`页面 // 这样的话在`index.html`中发起的请求，默认的源就是`http://localhost:8000` // 然后再去请求`http://localhost:8003`就会出现跨域了 app.use("/static", express.static("public")); app.listen("8000", () => { console.log("app1 running at port 8000"); });index.html的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h2>this is index.html at port 8000</h2> <button id="button">发送同源请求</button> <button id="cross-button">发送跨域请求</button> <script src="https://static.4ce.cn/npm/axios/dist/axios.min.js"></script> <script> const button = document.querySelector("#button"); const crossButton = document.querySelector("#cross-button"); axios.get("http://localhost:8000/login", {}).then((res) => { console.log(res); }); // 发送同域请求 button.onclick = function () { axios.get("http://localhost:8000/user", {}).then((res) => { console.log(res); }); }; // 发送跨域请求 crossButton.onclick = function () { axios({ method: "get", url: "http://localhost:8003/anotherService", }).then((res) => { console.log(res); }); }; </script> </body> </html>B服务的代码：// src/app2.js const express = require("express"); const app = express(); // 定义一个接口，index.html页面请求这个接口就是跨域（因为端口不同） app.get("/anotherService", (req, res) => { res.json({ code: 0, msg: "这是8003端口返回的" }); }); app.listen("8003", () => { console.log("app2 running at port 8003"); });这个时候环境基本就搭建好了。二、解决跨域携带cookie问题首先我们先在A服务的index.html页面中得到一个cookie,运行A服务：npm install express -D node src/app1.js然后打开 http://localhost:8000/static/index.html : 没有问题的话，页面长这样：这个时候F12打开控制台：可以看到发送了一个 login 请求，并且设置了 cookie ,也可以选择浏览器控制台的Application页签，选中cookie，可以看到cookie的信息：然后我们点击页面上的发送同源请求按钮，可以看到发送了一个user请求，并且已经携带上了cookie：接下来刺激的画面来了，我们点击 发送跨域请求 按钮，出现了跨域请求的报错：重点：接下来开始解决跨域携带cookie问题：1.在前端请求的时候设置request对象的属性withCredentials为true;什么是withCredentials？XMLHttpRequest.withCredentials 属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。如果在发送来自其他域的XMLHttpRequest请求之前，未设置withCredentials 为true，那么就不能为它自己的域设置cookie值。而通过设置withCredentials 为true获得的第三方cookies，将会依旧享受同源策略，因此不能被通过document.cookie或者从头部相应请求的脚本等访问。// 修改跨域请求的代码 crossButton.onclick = function () { axios({ withCredentials: true, // ++ 新增 method: "get", url: "http://localhost:8003/anotherService", }).then((res) => { console.log(res); }); };这个时候再去发送一个跨域请求，你会发现依旧报错，但是我们仔细看下报错，意思是需要设置header的 Access-Control-Allow-Origin 属性：2.在服务端设置Access-Control-Allow-Origin我们修改B(app2.js)服务的代码：// 在所有路由前增加，可以拦截所有请求 app.all("*", (req, res, next) => { res.header("Access-Control-Allow-Origin", "http://localhost:8000"); next(); });修改完之后再次发送一个跨域请求，你会发现，又报错了(接近崩溃)，但是跟之前报的错不一样了，意思大概就是Access-Control-Allow-Credentials这个属性应该设置为true，但是显示得到的是个''：3.在服务端设置Access-Control-Allow-Credentials再次修改B服务的代码（每次修改后需要重新运行）：// 在所有路由前增加，可以拦截所有请求 app.all("*", (req, res, next) => { res.header("Access-Control-Allow-Origin", "http://localhost:8000"); res.header("Access-Control-Allow-Credentials", "true"); // ++ 新增 next(); });再发送一个跨域请求：可以看到，这个跨域请求已经请求成功并且返回数据了！而且也携带了A服务的cookie，这个时候已经大功告成了。三、总结前端请求时在 request 对象中配置 "withCredentials": true服务端在 response 的 header 中配置 "Access-Control-Allow-Origin", "http://xxx:${port}"服务端在 response 的 header 中配置 "Access-Control-Allow-Credentials", "true"

nginx配置ssl和http2 server { listen 80; listen 443 ssl http2; server_name oss.xxxxxx.com; client_max_body_size 2048M; index index.html index.htm index.php default.html default.htm default.php; charset utf-8; #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则 #error_page 404/404.html; ssl_certificate E:/applications/nginx-1.20.1/conf_new/certs/oss/fullchain.pem; ssl_certificate_key E:/applications/nginx-1.20.1/conf_new/certs/oss/privkey.pem; ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3; ssl_ciphers ECCBH+CHACHA20:EECDH+CHACHA20-draft:ECCBH+AES128:RSA+AES128:ECCBH+AES256:RSA+AES256:ECCBH+3DES:RSA+3DES:!MD5; ssl_prefer_server_ciphers on; ssl_session_cache shared:SSL:10m; ssl_session_timeout 10m; add_header Strict-Transport-Security "max-age=31536000"; location / { #proxy_set_header Host $host; proxy_set_header Host $http_host; proxy_set_header Connection keep-alive; proxy_set_header X-Real-IP $remote_addr; proxy_set_header x-forwarded-for $remote_addr; proxy_pass http://192.168.3.53:21032; proxy_http_version 1.1; #添加 proxy_set_header Upgrade $http_upgrade; #添加 proxy_set_header Connection "upgrade"; #添加 } access_log E:/applications/nginx-1.20.1/conf_new/logs/oss.log; error_log E:/applications/nginx-1.20.1/conf_new/logs/oss.error.log; }

跨域问题 add_header Access-Control-Allow-Headers Content-Type,Content-Length,Accept-Encoding,X-Requested-with,Origin,lang;