nginx 配置前端项目添加https

可申请阿里云免费证书步骤省略…

nginx 配置

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;
        }
}

在这里插入图片描述
根据以上配置带https的访问地址

不带https的访问地址

在这里插入图片描述
接口访问

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

拓展：root 和 alias 的区别

首先确定 root和alias都可以定义在location模块中，都是用来指定请求资源的真实路径

使用 root 时, 服务器里真实的资源路径是 root 的路径拼接上 location 指定的路径

比如请求 http://www.test.com:9001/company/, 真实的资源路径就是

html/web/company/index.html

使用alias顾名思义是代指 location 的别名, 不论location 是什么,
资源的真实路径都是alias所指定的,所以location是匹配浏览器输入的地址, 真实访问的路径就是alias 指定的路径

其它区别

alias 只能配置在location 中, 而root 可以配置在 server, http 和 location 中

alias 后面必须要以 “/” 结尾, 否则会查找不到文件, 报404错误; 而 root 对 “/” 可有可无

nginx 配置前端项目添加https

猜你喜欢