First question

One of the most classic HTTP problems is the complete process by which an HTTP request is returned after the browser enters a URL

  1. The first step is to make a redirect. The browser may record the redirect and permanently redirect to a new address, so the first step is to determine whether the redirect is needed and where to redirect to.
  2. The second part will look at the app cache to determine whether the page has been cached. If there is a cache, it will read the cache. If there is no cache, it will go to the server to request resources.
  3. DNS lookup (domain name resolution) to find the IP address corresponding to the domain name.
  4. When you create a TCP connection, it involves a three-way handshake, and maybe HTTPS is different from HTTP.
  5. Send a request
  6. Response (end corresponding)

Second, HTTP protocol foundation and development history

Network protocol layering

  1. The main function of the physical layer is to define how the physical device transmits data
  2. The data link layer establishes data link connections between communicating entities
  3. The network layer creates logical links for data transfer between nodes
  4. The transport layer
    • Provide reliable end-to-end services to users
    • The transport layer hides the details of data communication from the lower layers
  5. The application layer
    • Many services are provided for applications
    • Built on top of TCP
    • Block network traffic details

HTTP protocol history

  1. HTTP / 0.9
    • Only GET command
    • No HEADER or other information describing the data
    • When the server sends the corresponding message, it closes the TCP connection
  2. HTTP / 1.0
    • Added a lot of commands
    • Add status code and header
    • Multi-character set support, multi-part sending, permissions, caching, etc
  3. HTTP/1.1 (for now), HTTPS is similar to HTTP1.1
    • Persistent connections, which can be maintained (without closing TCP connections) by declaration
    • Pipeline (sending multiple requests to the same connection)
    • Added host (can run multiple services on the same server) and other commands
    • HTTPS public key encryption, private key decryption, middleman no private key
  4. HTTP2
    • All data is transmitted in binary
    • Multiple requests within the same connection no longer need to be sent in sequence (concurrent)
    • Header compression and push to improve efficiency

The HTTP three-way handshake

  • The three-way handshake prevents the server from opening useless connections

HTTPS handshake procedure

URI, URL, URN

  1. URI
    • Uniform Resource Identifier
    • Used to uniquely identify information resources on the Internet
    • Include urls and UrNs
  2. URL
    • Unified Resource Locator
    • user:[email protected]: 80 / path? Query =…
    • These formats are called URLS, such as FTP
  3. URN
    • Permanent uniform resource locator
    • It can still be found after the resource has moved
    • At present, there is no very mature use scheme

The HTTP message

  1. HTTP method
    • Used to define operations on resources
    • Commonly used GET/POST, etc
    • There are semantics, by definition
  2. HTTP CODE
    • Defines the server’s response to the request
    • Each section of CODE has its own semantics
    • A good HTTP service can determine the result by CODE

An overview of HTTP features

Restriction and resolution of CORS cross-domain requests

  1. Requires backend support :’ access-Control-allow-Origin ‘:’*’
  2. ‘access-Control-allow-headers ‘:’ custom Headers’
  3. ‘access-control-allow-methods ‘:’POST,PUT,DELETE’
  4. No pre-request required for a certain amount of time: ‘access-Control-max-age ‘: ‘1000’ No pre-request required for 1000 seconds

HTTP cache header cache-control

  1. The cache can be
    • Public can be cached, the next time the cache can be read without request
    • Private Only the browser that initiated the request can request it
    • No-cache Does not support any node and must be verified by the server
  2. Due to
    • max-age=
    • S-maxage = The proxy server reads s-Message instead of max-age
    • Max-stale = set by the originator, even if max-age has expired, the browser will still read the stale cache
  3. revalidation
    • In a cache with max-age set, if it has expired, the original server must send the request to retrieve the data
    • Must -revalidate is used on the cache server
  4. other
    • No-store can never be cached
    • No-transform does not allow arbitrary changes to the content
  5. Refresh browser cache by hash code

Resources to verify

  1. Last-Modified
    • Last modified time
    • Used with if-modified-since or if-unmodified-since
    • Compare the last modification time to verify that the resource needs to be updated
  2. Etag
    • The data signature
    • This command is used with if-match or if-non-match
    • Determine whether to use caching by comparing the signature of the resource

The cookie and session

  1. cookie
    • Set by set-cookie
    • The next request will be picked up automatically
    • You can set multiple key-value pairs
  2. Cookie attribute
    • Max-age and expires set the expiration time
    • Secure only sends when HTTPS is used
    • HttpOnly cannot be accessed via document.cookie (to prevent CSRF attacks)

Long HTTP connection

  1. A TCP/IP connection can have a maximum of six concurrent requests
  2. Connection: keep-alive The TCP/IP Connection is not closed after a single request is completed
  3. Http2 can make concurrent requests over a TCP/IP connection (serial vs. parallel)

Data consultation

  1. classification
    • request
      1. Accept
      2. Content
    • return
  2. What kind of data do you want in the request declared by Accept
    • Accept specifies the data type
    • Accept-encoding Specifies the Encoding mode, limiting the compression mode
    • The Accept – Language Language
    • User-agent Indicates information about the browser
  3. The content returned by the server
    • Content-Type
    • Content-Encoding
    • Content-Language

Redirect

if (request.url === '/') {
    response.writeHead(302, {  // OR 301 becomes the new path permanently
      'Location': '/new'
    })
    response.end()
  }
  if (request.url === '/new') {
    response.writeHead(200, {
      'Content-Type': 'text/html',
    })
    response.end('<div>this is content</div>')}Copy the code

A simple HTTPS nginx configuration

proxy_cache_path cache levels=1:2 keys_zone=my_cache:10m; #nginx proxy cache

server {
  listen       80;
  # listen [::]:80 default_server;
  server_name  test.com;

  # return 302 https://$server_name$request_uri;

  location / {
    proxy_cache my_cache;
    proxy_pass http://127.0.0.1:8888;
    proxy_set_header Host $host;
  }
}

server {
  listen       443 http2; # http2
  server_name  test.com;

  # http2_push_preload on; # http2ssl on; ssl_certificate_key .. /certs/localhost-privkey.pem; ssl_certificate .. /certs/localhost-cert.pem; location / { proxy_cache my_cache; Proxy_pass http://127.0.0.1:8888; proxy_set_header Host$host; }}Copy the code