修改Nginx默认Header

Nginx内置的模块暂时仅支持修改响应头，使用add_header。其中：

add_header 来自内置模块ngx_http_headers_module，用于设置response header。参考：http://www.cnblogs.com/linxiong945/p/4174262.html

如果需要设置普通请求的request header，则需要单独安装headers-more-nginx-module模块。该模块提供了more_set_headers，more_set_input_headers分别用于设置请求、响应头。

示例：

location ~ .*\.(php|php5)?$ {
    fastcgi_pass  127.0.0.1:9000;
    fastcgi_index index.php;
    fastcgi_param LOG_ID $request_id;
    more_set_input_headers "Cookie: name=hello";
    more_set_headers "X-Powered-By:PHP";
    add_header  X-Powered-By2 'PHP';
    
    include fastcgi.conf;
}

需要使用到proxy_set_header和add_header指令。其中：

proxy_set_header 来自内置模块ngx_http_proxy_module，
用来重定义发往代理服务器服务器的请求头。参考：https://blog.csdn.net/weixin_41585557/article/details/82426784

示例：

location  ^~/test/ {
    proxy_pass http://127.0.0.1:8001$request_uri;
    proxy_set_header host $http_host;
    proxy_set_header x-real-ip $remote_addr;
    proxy_set_header x-forwarded-for $proxy_add_x_forwarded_for;
}

headers-more-nginx-module 模块

headers-more-nginx-module 模块用于添加、修改或清除请求/响应头，该模块不是nginx自带的，默认不包含该模块，需要另外安装。

Github地址：https://github.com/openresty/headers-more-nginx-module

安装：

$  wget 'http://nginx.org/download/nginx-1.13.6.tar.gz'
$  tar -xzvf nginx-1.13.6.tar.gz
$  cd nginx-1.13.6/
# 假设Nginx安装在 /opt/nginx/ 目录
$  ./configure --prefix=/opt/nginx \
     --add-module=/path/to/headers-more-nginx-module
$  make -j2
$  make install

从 NGINX 1.9.11 开始，可以使用动态模块加载（生成.so文件，无需重启Nginx整个服务）：

1 2	$ ./configure --prefix=/opt/nginx \ --add-dynamic-module=/path/to/headers-more-nginx-module

在Nginx配置文件里加上：

1	load_module /path/to/modules/ngx_http_headers_more_filter_module.so;

具体安装流程及细节步骤参考：Nginx安装echo模块 https://www.cnblogs.com/52fhy/p/10166333.html 。因为是类似的。

该模块主要有4个指令：

more_set_headers 用于添加、修改、清除响应头
more_clear_headers 用于清除响应头
more_set_input_headers 用于添加、修改、清除请求头
more_clear_input_headers 用于清除请求头

示例：

# set the Server output header
more_set_headers 'Server: my-server';

# set and clear output headers
location /bar {
    more_set_headers 'X-MyHeader: blah' 'X-MyHeader2: foo';
    more_set_headers -t 'text/plain text/css' 'Content-Type: text/foo';
    more_set_headers -s '400 404 500 503' -s 413 'Foo: Bar';
    more_clear_headers 'Content-Type';

    # your proxy_pass/memcached_pass/or any other config goes here...
}

# set output headers
location /type {
    more_set_headers 'Content-Type: text/plain';
    # ...
}

# set input headers
location /foo {
    set $my_host 'my dog';
    more_set_input_headers 'Host: $my_host';
    more_set_input_headers -t 'text/plain' 'X-Foo: bah';

    # now $host and $http_host have their new values...
    # ...
}

# replace input header X-Foo *only* if it already exists
more_set_input_headers -r 'X-Foo: howdy';

参考

1、【随笔】nginx add_header指令的使用 - linxiong - 博客园
http://www.cnblogs.com/linxiong945/p/4174262.html
2、nginx的headers_more模块的使用 - chunyuan314的博客 - CSDN博客
https://blog.csdn.net/chunyuan314/article/details/81737303
3、关于nginx中proxy_set_header的设置 - 七号空间 - CSDN博客
https://blog.csdn.net/weixin_41585557/article/details/82426784

缓存

nginx配置缓存的优点：可以在一定程度上，减少服务器的处理请求压力。比如对一些图片，css或js做一些缓存，那么在每次刷新浏览器的时候，就不会重新请求了，而是从缓存里面读取。这样就可以减轻服务器的压力。
nginx可配置的缓存又有2种：
1）客户端的缓存(一般指浏览器的缓存)。
2）服务端的缓存(使用proxy-cache实现的)。

客户端的缓存一般有如下两种方式实现

强缓存和协商缓存

强缓存

不会向服务器发送请求，直接从本地缓存中获取数据

请求资源的的状态码为: 200 ok(from memory cache)

协商缓存

向服务器发送请求，服务器会根据请求头的资源判断是否命中协商缓存

如果命中，则返回304状态码通知浏览器从缓存中读取资源

强缓存 & 协商缓存的共同点

都是从浏览器端读取资源

强缓存 VS 协商缓存的不同点

强缓存不发请求给服务器
协商缓存发请求给服务器，根据服务器返回的信息决定是否使用缓存 3.协商缓存发送请求服务器，根据服务器返回的信息决定是否使用缓存

在配置之前，我们来看下我们的项目基本架构如下

|----项目demo
|  |--- .babelrc       # 解决es6语法问题
|  |--- node_modules   # 所有依赖的包
|  |--- static
|  | |--- index.html  # html页面
|  | |--- css         # 存放css文件夹
|  | | |--- base.css  # css文件，是从网上随便复制过来的很多css的
|  | |--- js          # 存放js的文件夹
|  | | |--- jquery-1.11.3.js  # jquery 文件
|  | |--- images      # 存放images文件夹
|  | | |-- 1.jpg      # 图片对应的文件
|  |--- app.js         # 编写node相关的入口文件
|  |--- package.json   # 依赖的包文件

package.json 代码如下：

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon ./index.js"
  },
  "license": "MIT",
  "devDependencies": {},
  "dependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/register": "^7.0.0",
    "koa": "^2.7.0",
    "koa-static": "^5.0.0",
    "nodemon": "^1.19.0",
    "path": "^0.12.7"
  }
}

app.js 代码如下：

import path from 'path';
import Koa from 'koa';

//静态资源中间件
import resource from 'koa-static';
const app = new Koa();
const host = 'localhost';
const port = 7878;

app.use(resource(path.join(__dirname, './static')));

app.listen(port, () => {
  console.log(`server is listen in ${host}:${port}`);
});

index.js 代码如下：

1 2	require('@babel/register'); require('./app.js');

index.html 代码如下：

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端缓存</title>
    <style>
      .web-cache img {
        display: block;
        width: 100%;
      }
    </style>
    <link href="./css/base.css" rel="stylesheet" />
    <script type="text/javascript" src="./js/jquery-1.11.3.js"></script>
  </head>
  <body>
    <div class="web-cache">
      1111112224546664456999000
      <img src="./images/1.jpg" />
    </div>
  </body>
</html>

如上就是一些基本的代码结构，当我们在nginx没有配置任何的时候，我们直接在命令行中运行 npm run dev 的时候，然后我们在浏览器访问 http://localhost:7878/ 时候，可以看到不管我刷新多少次，浏览器下图片，css，js所有的请求都会返回200，不会有任何缓存。如下所示：

现在我们去我本地安装的nginx中去配置下哦，打开nginx.conf配置文件。打开nginx.conf，使用 cat /usr/local/etc/nginx/nginx.conf (或者使用 sudo open /usr/local/etc/nginx/nginx.conf -a 'sublime text' 使用编辑器sublime打开)。

在nginx.conf加入如下规则：

server {
  location ~* .(html)$ {
    access_log off;
    add_header  Cache-Control  max-age=no-cache;
  }

  location ~* .(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
    # 同上，通配所有以.css/.js/...结尾的请求
    access_log off;
    add_header    Cache-Control  max-age=360000;
  }
}

如上配置解析含义如下：

**~* 的含义是：通配任意字符（且大小写不敏感），\转义字符，因此 ~* .(html)$的含义是：匹配所有以.html结尾的请求
access_log off; 的含义是关闭日志功能。

add_header Cache-Control max-age=no-cache; 的含义：html文件不设置强制缓存时间，协商缓存，使用 Last-Modified。no-cache 会发起往返通信来验证缓存的响应，但如果资源未发生变化，则不会下载，返回304。

add_header Cache-Control no-cache,no-store; 的含义：告诉浏览器当前页面不进行缓存，每次访问的时间必须从服务器上读取最新的数据. 适用于单页面

add_header X-Cache $upstream_cache_status; 的含义：nginx提供了$upstream_cache_status变量来查看是否有命中缓存

$upstream_cache_status中包含以下几个状态：
MISS:未命中缓存，请求被传送到后端服务器。
HIT: 命中缓存，使用缓存响应客户端。
EXPIRED: 缓存已经过期，请求被传送到后端。
UPDATING: 正在更新缓存，将使用旧缓存的应答客户端。
STALE: 客户端将得到过期的应答。
BYPASS: 缓存被绕过了，请求被传送到后端服务器。
REVALIDATED: nginx通过过期缓存中的Etag和Last-Modified字段的值向被代理服务器发起验证请求。

如下图所示：

**add_header Cache-Control max-age=360000;** 的含义给上面匹配后缀的文件设置强制缓存，且缓存的时间是360000秒，第一次访问的时候，从服务器请求，当除了第一次以外，再次刷新浏览器，会从浏览器缓存读取，那么强制缓存一般是从内存里面先读取，如果内存没有，再从硬盘读取。

如下图所示：

注意：如上只是不对反向代理的页面进行缓存设置的，但是如果是反向代理后的页面，如上设置是不生效的。比如说我node起了一个服务，然后通过访问nginx反向代理的方式代理到我node服务来，上面的配置是不生效的。因此我们需要如下处理配置。

解决nginx反向代理缓存不起作用的问题

比如我上面的node服务端口是7878端口。nginx需要如下配置：

server {
  listen  8081;
  server_name  xxx.abc.com;
  location / {
    proxy_pass http://localhost:7878;
    add_header  Cache-Control  max-age=no-cache;
  }
}

如果我们要添加缓存功能的话，需要创建一个用于存放缓存文件的文件夹。比如我们这里使用 /data/nuget-cache。

在/usr/local/etc/nginx目录下新建。比如使用命令：mkdir /data/nuget-cache. 创建完成后，我们来查看下：

2）然后我们需要在nginx.conf的http设置部分添加 proxy_cache_path的设置，如下：

http {
  // ..... 其他的配置
  proxy_cache_path  /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
  server {
    listen  8081;
    server_name  xxx.abc.com;
    location / {
      proxy_pass http://localhost:7878;
      add_header  Cache-Control  max-age=no-cache;
    }
  }
}

proxy_cache_path 各个配置值的含义解析如下：

proxy_cache_path 指缓存的目录，目录为：/data/nuget-cache。
levels=1:2 表示采用2级目录结构；
keys_zone 指的是缓存空间名称，叫nuget-cache。缓存内存的空间为20M。
max_size 指的是缓存文件可以占用的最大空间。为50G.
inactive=168h; 默认过期时间为168个小时。为7天，也可以写成：inactive=7d; 这样的。

3）我们还需要在server设置部分添加 proxy_cache 与 proxy_cache_valid的设置：如下代码：

http {
  // ..... 其他的配置
  proxy_cache_path  /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
  server {
    listen  8081;
    server_name  xxx.abc.com;
    location / {
      proxy_pass http://localhost:7878;
      add_header  Cache-Control  max-age=no-cache;
      proxy_cache nuget-cache;
      proxy_cache_valid 168h;
    }
  }
}

proxy_cache 设置的是 proxy_cache_path中的keys_zone的值。
proxy_cache_valid： 设置的是缓存过期时间，比如设置168个小时过期。

如上配置完成后，我们保存nginx.conf配置后，重新启动下nginx后，发现还是不能缓存文件了。因此我们还需要进行如下配置：

需要在server中再加上如下代码：

proxy_ignore_headers Set-Cookie Cache-Control;
proxy_hide_header Cache-Control;
proxy_hide_header Set-Cookie;

proxy_ignore_headers的含义是： 忽略Cache-Control的请求头控制，依然进行缓存，比如对请求头设置cookie后，默认是不缓存的，需要我们增加忽略配置。

因此所有配置变成如下了：

http {
  // ..... 其他的配置
  proxy_cache_path  /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
  server {
    listen  8081;
    server_name  xxx.abc.com;
    location / {
      proxy_pass http://localhost:7878;
      add_header  Cache-Control  max-age=no-cache;
      proxy_cache nuget-cache;
      proxy_cache_valid 168h;
      proxy_ignore_headers Set-Cookie Cache-Control;
      proxy_hide_header Cache-Control;
      proxy_hide_header Set-Cookie;
    }
  }
}

但是如上写法看起来很繁琐，因此我们可以使用include命令把文件包含进来，因此我在 /usr/local/etc/nginx 目录下新建一个 nginx_proxy.conf 配置文件，把上面的 proxy相关的配置放到该文件里面，如下所示：

然后我们的配置就变成如下了：

http {
  // ..... 其他的配置
  proxy_cache_path  /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
  include nginx_proxy.conf;
  server {
    listen  8081;
    server_name  xxx.abc.com;
    location / {
      proxy_pass http://localhost:7878;
      add_header  Cache-Control  max-age=no-cache;
    }
  }
}

如上是对页面使用协商缓存的，但是对于图片，css, 或js这样的，我想使用强制缓存，因此对于其他的类型文件我们统一如下这样处理：

server {
  listen       8081;
  server_name  xxx.abc.com;
  location / {
    proxy_pass http://localhost:7878;
    add_header  Cache-Control  max-age=no-cache;
  }
  location ~* .(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
    access_log off;
    add_header Cache-Control "public,max-age=30*24*3600";
    proxy_pass http://localhost:7878;
  }
  error_page   500 502 503 504  /50x.html;
  location = /50x.html {
    root   html;
  }
}

如上css或js文件等缓存的时间是30天。使用的是max-age强制缓存。因此如上，如果是页面第二次访问的话，会返回304，如下所示：

如果是css或js这样的访问的话，就是强制缓存了，状态码还是200，但是先从内存里面读取的。当然如果进程结束了，比如浏览器关闭了，再打开，那么是从硬盘上读取的了。如下所示：

因此nginx.conf 所有的配置文件代码如下：

worker_processes  1;
events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  #tcp_nopush     on;
  #keepalive_timeout  0;
  keepalive_timeout  65;
  include nginx_proxy.conf;
  proxy_cache_path  /data/nuget-cache levels=1:2 keys_zone=nuget-cache:20m max_size=50g inactive=168h;
  #gzip  on;
  server {
    listen       8081;
    server_name  xxx.abc.com;
    location / {
      proxy_pass http://localhost:7878;
      add_header  Cache-Control  max-age=no-cache;
    }
    location ~* .(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
      access_log off;
      add_header Cache-Control "public,max-age=30*24*3600";
      proxy_pass http://localhost:7878;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   html;
    }
  }
}

如上上面的css，js这些我时间设置短一点，比如设置60秒过期的话，那么过期后，我再刷新浏览器，浏览器会去询问服务器端，检查资源是否被更新了，如果资源没有被更新的话，那么服务器端会范湖304.资源依然读取本地的。如下所示：

然后再继续刷新的话，它之后又从内存里面读取了。依次这样循环下去。

nginx开启gzip

开启gzip配置是在http层加的。基本配置代码如下：

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
gzip_min_length 1k;
# gzip 压缩级别 1-10 
gzip_comp_level 2;
# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

我们如上的配置加上去后，如在http下加上上面的gzip代码：

http {
  # 开启gzip
  gzip on;
  # 启用gzip压缩的最小文件；小于设置值的文件将不会被压缩
  gzip_min_length 1k;
  # gzip 压缩级别 1-10 
  gzip_comp_level 2;
  # 进行压缩的文件类型。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  # 是否在http header中添加Vary: Accept-Encoding，建议开启
  gzip_vary on;
}