最近在阿里云上入手了一臺(tái)云服務(wù)器，準(zhǔn)備搭建一套java程序，在Nginx配置SSL證書時(shí)，配上之后前端可以正常以https的方式打開，但是訪問不到后端，自己也是明明知道是Niginx配置的問題，但就不知道錯(cuò)哪了，當(dāng)時(shí)心里的那種感覺真是無法表達(dá)嗚嗚嗚…

經(jīng)過排查發(fā)現(xiàn)前端訪問后端在nginx中做轉(zhuǎn)發(fā)代理時(shí)，localhost ~^api 地址配置錯(cuò)了。具體是什么原因呢，如下所示
注：本篇文章主要講的是Nginx配置實(shí)現(xiàn)https的形式進(jìn)行訪問網(wǎng)站，如果有的博主遇到Nginx配置訪問網(wǎng)站404、SSL證書在哪獲取等問題，私信我，不收取任何費(fèi)用，我會(huì)一一的教你如何去解決，歡迎大家打擾

Nginx配置源碼

先來看我的配置源碼：
這段源碼中我都標(biāo)注了需要修改的地方，之前我配置的是通過http的方式訪問域名，是沒有問題的，但是當(dāng)我通過https訪問時(shí)，就出現(xiàn)了訪問不到后端的問題，其實(shí)我的問題沒有出在nginx配置上，出在了前端代碼中訪問后端Api時(shí)，地址錯(cuò)了
注意：如果你按照我的這種方式進(jìn)行配置的，確保云服務(wù)器中已經(jīng)添加配置了443和80端口，如果安裝了寶塔，寶塔里面也需要添加配置一下這兩個(gè)端口(不知道怎么配，或者不明白的，私信我！)

user  www www;
worker_processes auto;
error_log  /www/wwwlogs/nginx_error.log  crit;
pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;

stream {
    log_format tcp_format '$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time';
  
    access_log /www/wwwlogs/tcp-access.log tcp_format;
    error_log /www/wwwlogs/tcp-error.log;
    include /www/server/panel/vhost/nginx/tcp/*.conf;
}

events
    {
        use epoll;
        worker_connections 51200;
        multi_accept on;
    }

http
    {
        include       mime.types;
        #include luawaf.conf;

        include proxy.conf;

        default_type  application/octet-stream;

        server_names_hash_bucket_size 512;
        client_header_buffer_size 32k;
        large_client_header_buffers 4 32k;
        client_max_body_size 50m;

        sendfile   on;
        tcp_nopush on;

        keepalive_timeout 60;

        tcp_nodelay on;

        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 256k;
        fastcgi_intercept_errors on;

        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

        limit_conn_zone $binary_remote_addr zone=perip:10m;
        limit_conn_zone $server_name zone=perserver:10m;

        server_tokens off;
        access_log off;

    server {
        listen 80;
        listen 443 ssl http2;
        server_name  這里填你的域名地址;
        add_header Content-Security-Policy upgrade-insecure-requests;
        
        if ($server_port !~ 443){
          rewrite ^(/.*)$ https://$host$1 permanent;
        }
        
        # 證書地址
        ssl_certificate  這里填你的SSL證書地址.pem結(jié)尾那個(gè)文件;
        ssl_certificate_key 這里填你的SSL證書地址.key結(jié)尾那個(gè)文件;
        ssl_prefer_server_ciphers on;
        
        gzip on;
        gzip_vary on;
        gzip_comp_level 9;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_disable "MSIE [1-6]\.";
        gzip_min_length 2048;
        
      location / {
            root   這個(gè)地方填存放前端dist文件地址; 
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        
        location ^~ /api/ {
          proxy_pass 這個(gè)地方填存放后端地址;# 我的是服務(wù)器公網(wǎng)IP+后端端口號(hào)
          proxy_read_timeout 1800s;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "Upgrade"; 
        }
    }
include /www/server/panel/vhost/nginx/*.conf;
}

我的報(bào)錯(cuò)點(diǎn)

我前端用的是ant design vue，在.env.production我之前是這樣配置的
這種方式http是可以正常訪問的，我在配置htts訪問時(shí)，根本沒有想到需在修改一下這個(gè)地方，我當(dāng)時(shí)想http可以訪問https應(yīng)該也可以，就沒有這個(gè)地址
原因：因?yàn)橹皀ginx中api配置的是IP地址＋后端端口號(hào)，前端請(qǐng)求Nginx打到localhost上，通過.env.production文件中配置的IP地址＋后端端口號(hào)直接去服務(wù)器中找這個(gè)后端端口號(hào)了，沒有走nginx中api配置，因?yàn)槲沂怯玫姆?wù)器公網(wǎng)IP+端口號(hào)，只要服務(wù)器中這個(gè)端口號(hào)下對(duì)應(yīng)的進(jìn)程在運(yùn)行就可以訪問到的后端

VUE_APP_API_BASE_URL=http://服務(wù)器公網(wǎng)IP:端口號(hào)/jeecg-boot/

現(xiàn)在當(dāng)我改成https訪問時(shí)，我是用過域名的形式進(jìn)行訪問，在Nginx配置中server_name 指定的域名和訪問后端Api地址中的域名一致

VUE_APP_API_BASE_URL=https://域名/api/jeecg-boot

注意：如果你現(xiàn)在是想直接在Nginx配置https進(jìn)行訪問，需要注意的點(diǎn)有
文章來源地址http://www.zghlxwxcb.cn/news/detail-670630.html

1. 確保SSL證書文件已下載，.pem和.key兩個(gè)文件
2. 確保已經(jīng)與下載的SSL文件證書綁定(你下載的SSL證書是你域名綁定的)
3. 開放80和443端口，在云服務(wù)器上進(jìn)行配置，如果裝了寶塔面板，寶塔里面也需要開放一下443和80(如果不配置寶塔的話，會(huì)一直加載訪問不到)
4. 前端代碼中配置文件的配置(和我遇到的錯(cuò)誤一樣，這塊可能有點(diǎn)難理解)
   
   上面的這幾種在配置時(shí)需要注意的幾個(gè)點(diǎn)，以上有不明白的或者不知道怎么配置的，私信我，免費(fèi)配置及解答，24小時(shí)在線！

到了這里，關(guān)于nginx配置SSL證書配置https訪問網(wǎng)站 超詳細(xì)（附加配置源碼+圖文配置教程）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！