若依 Vue2前后端分离 +部署nginx 支持 https 协议

1.准备工作

（1）申请好的域名及证书
（2）服务器开443 （https 默认端口）及80（http 默认端口） 端口。
（3）准备写好的后台

2.配置

主要是nginx.conf 配置

server {
    listen       443 ssl;
    server_name  localhost xxx.com;
 
    ssl_certificate      xxx.pem;  # 这个是证书的crt文件所在目录
    ssl_certificate_key  xxx.key;  # 这个是证书key文件所在目录
 
    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;
 
    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;
	
	add_header 'Access-Control-Allow-Methods' 'GET, POST, DELETE, PUT';
	add_header 'Allow' 'GET, POST, DELETE, PUT';
	add_header 'Content-Security-Policy' 'upgrade-insecure-requests;connect-src *';
	
	
	location /mpapp {
		alias   d:/mingpian-manager/dist;
		index  index.html index.htm;
		try_files $uri $uri/ /mpapp/index.html;
	}
	location /index {
		alias   d:/mingpian-manager/dist;
		index  index.html index.htm;
		try_files $uri $uri/ /mpapp/index.html;
	}
	location /mpApi/ {
			proxy_pass http://127.0.0.1:8084/mpApi/;
			proxy_set_header X-Forwarded-Proto $scheme;
            proxy_set_header Host              $http_host;
            proxy_set_header X-Real-IP         $remote_addr;	
			proxy_set_header X-Forwarded-For $remote_addr:$remote_port;	
	}
	
 # 所有走http 的协议都转到https 协议里
 server {
    listen 80;
    server_name jn.dechnic.com;
 
    #核心代码
    rewrite ^(.*)$ https://${server_name}$1 permanent;
}
   
}

完整配置：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
	# 开启header支持下划线
　　underscores_in_headers on;
	client_max_body_size 200m; 
    client_body_buffer_size 200M;
	
	
	
	server {
		listen      30091 ;
		server_name   localhost;
		
        #ssl_certificate D:/nginx-1.20.1/cert/8114874_demo.dechnic.com.pem;
        #ssl_certificate_key D:/nginx-1.20.1/cert/8114874_demo.dechnic.com.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:!DHE;
        #ssl_prefer_server_ciphers on;
		
		proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host:$server_port; #这里是重点,这样配置才不会丢失端口
		
		
		location /mpApi/ {
			proxy_pass http://localhost:8084/mpApi/;
			proxy_set_header Host $host;
			proxy_set_header X-Real_IP $remote_addr;
			proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
		}
				
		
		location /mpapp {
			alias   D:/mingpian-manager/dist/;
			index  index.html index.htm;
			try_files $uri $uri/ /mpapp/index.html;
        }
	
		
	
		
		
		error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }	
	}


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

备注：

1. 默认Nginx服务器，不支持Header属性的key有"_"下划线，如果要支持可，设置：
   　　# 开启header支持下划线
   　　underscores_in_headers on;
2. Nginx默认是上传一个不能超过1M大小的文件，nginx上传文件大小报错500的解决办法：设置 body内容大小为xxxM
   上传文件大小相关的有三个配置

• client_body_buffer_size 配置请求体缓存区大小, 不配的话，
• client_body_temp_path 设置临时文件存放路径。只有当上传的请求体超出缓存区大小时，才会写到临时文件中
• client_max_body_size 设置上传文件的最大值
  亲测：一般我们设置 client_body_buffer_size、client_max_body_size 即可！

client_max_body_size 200m; client_body_buffer_size 200M;

可以设置在http 里面，也可以设置在 location 转发里面，区别在于：在http 里面全局生效，在 location 里面只有 此转发有效。

location /mpApi/ {
    client_max_body_size 200m; 
    client_body_buffer_size 200M;
	proxy_pass http://localhost:8084/mpApi/;
	proxy_set_header Host $host;
	proxy_set_header X-Real_IP $remote_addr;
	proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
}