https配置流程--Nginx（以及跨域、响应超时问题解决）

---

前言

前提条件：你已经申请到SSL证书。

申请教程链接: https://blog.csdn.net/weixin_45248225/article/details/119422058.。

---

一、条件准备

环境说明：VUE+JAVA 前后端分离。

1.jar包、nginx配置

配置教程: https://blog.csdn.net/weixin_45248225/article/details/117986285.。

2.已经申请到SSL证书

二、https配置流程

1.找到nginx安装路径，打开nginx.conf配置文件

2.nginx.conf配置文件下，单独添加server {}

添加如下（示例）：

server {
    listen 443 ssl;#注意是否开启了443安全组
    #更换自己的域名
    server_name 域名.com;
    client_max_body_size 1024M; #允许客户端请求的最大单文件字节数，人话：能上传多大文件
        client_body_buffer_size 2m; #缓冲区代理缓冲用户端请求的最大字节数，人话：一次能接受多少文件，建议根据带宽上限设置，减少磁盘读写，加快速度
    proxy_connect_timeout 5m;   #nginx跟后端服务器连接超时时间(代理连接超时)，这个看需求
    proxy_read_timeout 5m;      #连接成功后，后端服务器响应时间(代理接收超时)，这个 同上
    proxy_send_timeout 5m;

	#vue2.0前端项目打包后生成的chunk-vendors文件过大加载太慢解决方案
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    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;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

	#需将下载的SSL证书放到指定目录下（如：cert（当前文件夹与nginx.conf同级））
    ssl_certificate cert/下载的.com.pem;
    ssl_certificate_key cert/下载的.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_prefer_server_ciphers on;
    access_log /mnt/wwwlogs/access_nginx.log combined;
  
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    location /nginx_status {
      stub_status on;
      access_log off;
      allow 127.0.0.1;
      deny all;
    }
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
      expires 30d;
      access_log off;
    }
    location ~ .*\.(js|css)?$ {
      expires 7d;
      access_log off;
    }
    location ~ ^/(\.user.ini|\.ht|\.git|\.svn|\.project|LICENSE|README.md) {
      deny all;
    }
    location ^~ / {
add_header Access-Control-Allow-Origin *;

    add_header Access-Control-Allow-Credentials 'true';

    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';

    add_header Access-Control-Allow-Headers 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

   add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';

 

      proxy_pass http://localhost:9090/; #（9090需修改）配置的端口号
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  }

---

三、https相关问题及优化

说明：一下问题再上述nginx.conf中都已使用

1.使用nginx反向代理做前后端分离 跨域问题

在location ^~ / {}中添加。

	add_header Access-Control-Allow-Origin *;

    add_header Access-Control-Allow-Credentials 'true';

    add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';

    add_header Access-Control-Allow-Headers 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

    add_header Access-Control-Expose-Headers 'Content-Length,Content-Range';

2.使用nginx反向代理做前后端分离 上传大文件失败

在server {} server_name下添加。

#允许客户端请求的最大单文件字节数，人话：能上传多大文件
client_max_body_size 1024M;

3.使用nginx反向代理做前后端分离 上传大文件速度特别慢

#缓冲区代理缓冲用户端请求的最大字节数，人话：一次能接受多少文件，建议根据带宽上限设置，减少磁盘读写，加快速度
client_body_buffer_size 10m; 

4.使用nginx反向代理做前后端分离 上传大文件响应超时

  #nginx跟后端服务器连接超时时间(代理连接超时)，这个看需求
  proxy_connect_timeout 5m;   
  #连接成功后，后端服务器响应时间(代理接收超时)，这个 同上
  proxy_read_timeout 5m; 
  #服务端向客户端传输数据的超时时间。
  proxy_send_timeout 5m;   

教程链接: https://blog.csdn.net/zhouzhupianbei/article/details/115892723.

5.vue2.0前端项目打包后生成的chunk-vendors文件过大加载太慢解决方案

说明：此未成功验证

	#vue2.0前端项目打包后生成的chunk-vendors文件过大加载太慢解决方案
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    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;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

教程链接: https://blog.csdn.net/baifucn/article/details/111866421.
每次更改nginx.conf文件后都需重启nginx。

处理结果

以上包括了我本次配置遇到的nginx下的Https跨域、上传文件过大等一系列问题汇总，整整花了一天时间。
最后的话：很多时候都是本地没有问题，线上就存在很多问题，这时候请一步步耐心解决，肯定能解决的。