nginx 配置前端项目添加https

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

nginx 配置

server {listen    8050;       #默认80端口 如果需要所有访问地址都是https 需要注释listen     8443 ssl;   #https 访问的端口 ，默认443server_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.htmlerror_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 指定的路径

其它区别

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

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