nginx跨域处理 - Githubissues

下面的这段 nginx 配置，对于前端开发者足够了
http {
  # 开启gzip
  gzip on;
  # 开启gzip_static
  # gzip_static开启后可能会报错，需要安装相应的模块
  # 只有这个开启，vue文件打包的.gz文件才会有效果，否则不需要开启gzip进行打包
  gzip_static on;
  gzip_proxied any;
  # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  #如果nginx中使用了多层代理 必须设置这个才可以开启gzip。
  gzip_http_version 1.0;
  # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间。一般设置1和2
  gzip_comp_level 2;
  # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
  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;
  # 禁用IE 6 gzip
  gzip_disable "MSIE [1-6]\.";

  # 开启 brotli压缩
  # 需要安装对应的nginx模块,具体安装方式可以自行查询
  # 可以与gzip共存不会冲突
  brotli on;
  brotli_comp_level 6;
  brotli_buffers 16 8k;
  brotli_min_length 20;
  brotli_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml;

  server {
    listen 8080;
    server_name localhost;
    # 开启CSP
    # 解决内容安全策略CSP（Content-Security-Policy）
    add_header Content-Security-Policy "default-src 'self' static4.segway.com(该地址按需修改) 'unsafe-inline' 'unsafe-eval' blob: data: ;";
    add_header X-Xss-Protection "1;mode=block";
    add_header X-Content-Type-Options nosniff;

    # 接口代理，用于解决跨域问题
    location /api {
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      # 后台接口地址
      proxy_pass http://110.110.1.1:8080/api;
      proxy_redirect default;
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Headers X-Requested-With;
      add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
    }

    # 静态资源部署
    location /web {
      # 不缓存html，防止程序更新后缓存继续生效
      if ($request_filename ~* .*\.(?: htm|html)$) {
        add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
        access_log on;
      }
      # 这里是vue打包文件dist内的文件的存放路径
      root /usr/local/nginx/html/web;
      index index.html index.htm;
    }

    location / {
      # 当路由为history模式时，需要的配置
      try_files $uri $uri/ /index.html;
    }

    # js,css等文件配置强缓存
    location ~* ^.+.(ico|gif|jpg|jpeg|png)$ {
      access_log off;
      expires 30d;
    }
    location ~* ^.+.(css|js|txt|xml|swf|wav)$ {
      access_log off;
      expires 7d;
    }
    location ~* ^.+.(eot|ttf|otf|woff|svg)$ {
      access_log off;
      expires 30d;
    }
    # html,htm文件配置协商缓存
    location ~* ^.+.(html|htm)$ {
      expires -1;
      add_header Cache-Control "no-cache";
    }
  }
}
摘自 https://vvbin.cn/doc-next/guide/dep/nginx.html#nginx-%E5%A4%84%E7%90%86%E8%B7%A8%E5%9F%9F
cklwblove / blog

nginx跨域处理 #80
