nginx configure front-end project to add https

You can apply for a free Alibaba Cloud certificate. Steps omitted...

nginx configuration

server {
     listen    8050;       #默认80端口 如果需要所有访问地址都是https 需要注释
     listen     8443 ssl;   #https 访问的端口 ，默认443
    server_name  192.168.128.XX;           #域名 或 ip

      # 增加ssl
      #填写证书文件名称  路径
      ssl_certificate /nginx-group/nginx-1.24.0/ssl/server.crt;   # pem 或 crt 文件
      #填写证书私钥文件名称
      ssl_certificate_key /nginx-group/nginx-1.24.0/ssl/server_nopass.key;

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

     # 指定密码为openssl支持的格式
     ssl_protocols  SSLv2 SSLv3 TLSv1.2;

     ssl_ciphers  HIGH:!aNULL:!MD5;  # 密码加密方式
     ssl_prefer_server_ciphers  on;   # 依赖SSLv3和TLSv1协议的服务器密码将优先于客户端密码

# 前端  
# 定义首页和路径  
	  location /gdxtweb {
		  alias  html/gdxtweb;    #可以是 root 或  alias 。
  	     index  index.html index.htm;
		  try_files $uri $uri/ /gdxtweb/gdxtweb/index.html;                 
      }
# 后端接口   此处根据个人需求
    location /api {
      proxy_pass http://192.168.125.84:9528/api;  # 未转发的原始访问接口地址 ，添加后 前端代码里访问的接口地址应配置 'https://192.168.125.84:8443/api' 
      proxy_set_header Host $host:$server_port;
		  proxy_set_header X-Real-IP $remote_addr;
		  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		  proxy_connect_timeout 800s;
		  proxy_send_timeout 800s;
		  proxy_read_timeout 800s;
      }

    #重定向错误页面到 /50x.html
	  error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
}

Insert image description here
According to the above configuration, the access address with https

The access address without https

Insert image description here
Interface access

#原始接口地址 http://192.168.125.84:9528/api;
#前端项目里配置的访问接口
export const baseUrl = 'https://192.168.125.84:8443/api'

Expansion: the difference between root and alias

First, make sure that both root and alias can be defined in the location module, both of which are used to specify the real path of the requested resource.

When using root, the real resource path in the server is the path of root concatenated with the path specified by location.

For example, when requesting http://www.test.com:9001/company/, the real resource path is

html/web/company/index.html

Using alias, as the name suggests, refers to an alias for location. No matter what the location is,
the real path of the resource is specified by alias, so location matches the address entered by the browser. The actual access path is the path specified by alias

Other differences

Alias can only be configured in location, while root can be configured in server, http and location.

alias must end with "/", otherwise the file will not be found and a 404 error will be reported; and root is optional for "/"

nginx configure front-end project to add https

Guess you like