当 React 请求 Django API 时，发生 net::ERR_SSL_PROTOCOL_ERROR答案

【问题标题】：When React requests to Django API, net::ERR_SSL_PROTOCOL_ERROR is occured当 React 请求 Django API 时，发生 net::ERR_SSL_PROTOCOL_ERROR
【发布时间】：2020-12-26 16:02:08
【问题描述】：

堆栈：AWS Lightsail、React、DRF、Django、Gunicorn、NGINX

我使用 Let's Encrypt 创建了证书。

※ 我关注了这个网站：
https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-16-04

所以，我可以毫无错误地访问 https://mydomain。

但是当 React 调用 Django API 时，会发生 net::ERR_SSL_PROTOCOL_ERROR。

我认为我需要在 DRF 中设置一些东西，Django。

导致 syslog 和 /var/log/nginx/error.log 中没有记录错误。

我用谷歌搜索，但找不到我想要的。

我可以征求意见吗？谢谢。

EDIT : 下面是 NGINX 的 conf 文件。

server {
    listen 80;
    server_name mydomain;

    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl http2;
    server_name mydomain;

    ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mydomain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        root /react_project_path/build;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

server {
    listen 8000;
    server_name mydomain;

    charset utf-8;

    location / {
        include proxy_params;
        proxy_pass https://unix:/django_project_path/gunicorn.sock;
    }

    location /static/ {
        alias /django_project_path/static/;
    }

    location /media/ {
        alias /django_project_path/media/;
    }
}

编辑：netstat 结果。

编辑：现在我检查我的日志。

我刚刚添加了一行代码。

server {
    listen 443 ssl http2;
    server_name mydomain;

    error_log /var/log/nginx/error.log debug;

    ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot
    ...

下面是 NGINX 的 error.log。（我在这里为私有编辑了路径、令牌、会话。）

2020/09/09 15:46:29 [debug] 3322#3322: accept on 0.0.0.0:443, ready: 0
2020/09/09 15:46:29 [debug] 3322#3322: posix_memalign: 0000556469DEEA20:512 @16
2020/09/09 15:46:29 [debug] 3322#3322: *13 accept: 218.235.196.18:8093 fd:3
2020/09/09 15:46:29 [debug] 3322#3322: *13 event timer add: 3: 60000:23210254
2020/09/09 15:46:29 [debug] 3322#3322: *13 reusable connection: 1
2020/09/09 15:46:29 [debug] 3322#3322: *13 epoll add event: fd:3 op:1 ev:80002001
2020/09/09 15:46:29 [debug] 3322#3322: *13 http check ssl handshake
2020/09/09 15:46:29 [debug] 3322#3322: *13 http recv(): 1
2020/09/09 15:46:29 [debug] 3322#3322: *13 https ssl handshake: 0x16
2020/09/09 15:46:29 [debug] 3322#3322: *13 tcp_nodelay
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL ALPN supported by client: h2
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL ALPN supported by client: http/1.1
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL ALPN selected: http/1.1
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL_do_handshake: -1
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL_get_error: 2
2020/09/09 15:46:29 [debug] 3322#3322: *13 reusable connection: 0
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL handshake handler: 0
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL_do_handshake: 1
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL: TLSv1.2, cipher: "ECDHE-RSA-CHACHA20-POLY1305 TLSv1.2 Kx=ECDH Au=RSA Enc=CHACHA20/POLY1305(256) Mac=AEAD"
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL reused session
2020/09/09 15:46:29 [debug] 3322#3322: *13 reusable connection: 1
2020/09/09 15:46:29 [debug] 3322#3322: *13 http wait request handler
2020/09/09 15:46:29 [debug] 3322#3322: *13 malloc: 0000556469DF3390:1024
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL_read: -1
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL_get_error: 2
2020/09/09 15:46:29 [debug] 3322#3322: *13 free: 0000556469DF3390
2020/09/09 15:46:29 [debug] 3322#3322: *13 http wait request handler
2020/09/09 15:46:29 [debug] 3322#3322: *13 malloc: 0000556469DF3390:1024
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL_read: 813
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL_read: -1
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL_get_error: 2
2020/09/09 15:46:29 [debug] 3322#3322: *13 reusable connection: 0
2020/09/09 15:46:29 [debug] 3322#3322: *13 posix_memalign: 0000556469E3DC90:4096 @16
2020/09/09 15:46:29 [debug] 3322#3322: *13 http process request line
2020/09/09 15:46:29 [debug] 3322#3322: *13 http request line: "GET /character/ironclad HTTP/1.1"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http uri: "/character/ironclad"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http args: ""
2020/09/09 15:46:29 [debug] 3322#3322: *13 http exten: ""
2020/09/09 15:46:29 [debug] 3322#3322: *13 posix_memalign: 0000556469EAAA50:4096 @16
2020/09/09 15:46:29 [debug] 3322#3322: *13 http process request header line
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Host: mydomain"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Connection: keep-alive"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Upgrade-Insecure-Requests: 1"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Sec-Fetch-Site: same-origin"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Sec-Fetch-Mode: navigate"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Sec-Fetch-User: ?1"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Sec-Fetch-Dest: document"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Referer: https://mydomain/"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Accept-Encoding: gzip, deflate, br"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Accept-Language: ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "Cookie: csrftoken=some_data; sessionid=some_data"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "If-None-Match: W/"5f577837-8e2""
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header: "If-Modified-Since: Tue, 08 Sep 2020 12:25:27 GMT"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http header done
2020/09/09 15:46:29 [debug] 3322#3322: *13 event timer del: 3: 23210254
2020/09/09 15:46:29 [debug] 3322#3322: *13 generic phase: 0
2020/09/09 15:46:29 [debug] 3322#3322: *13 rewrite phase: 1
2020/09/09 15:46:29 [debug] 3322#3322: *13 test location: "/"
2020/09/09 15:46:29 [debug] 3322#3322: *13 using configuration "/"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http cl:-1 max:1048576
2020/09/09 15:46:29 [debug] 3322#3322: *13 rewrite phase: 3
2020/09/09 15:46:29 [debug] 3322#3322: *13 post rewrite phase: 4
2020/09/09 15:46:29 [debug] 3322#3322: *13 generic phase: 5
2020/09/09 15:46:29 [debug] 3322#3322: *13 generic phase: 6
2020/09/09 15:46:29 [debug] 3322#3322: *13 generic phase: 7
2020/09/09 15:46:29 [debug] 3322#3322: *13 access phase: 8
2020/09/09 15:46:29 [debug] 3322#3322: *13 access phase: 9
2020/09/09 15:46:29 [debug] 3322#3322: *13 access phase: 10
2020/09/09 15:46:29 [debug] 3322#3322: *13 post access phase: 11
2020/09/09 15:46:29 [debug] 3322#3322: *13 generic phase: 12
2020/09/09 15:46:29 [debug] 3322#3322: *13 try files handler
2020/09/09 15:46:29 [debug] 3322#3322: *13 http script var: "/character/ironclad"
2020/09/09 15:46:29 [debug] 3322#3322: *13 trying to use file: "/character/ironclad" "/react_project_path/build/character/ironclad"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http script var: "/character/ironclad"
2020/09/09 15:46:29 [debug] 3322#3322: *13 trying to use dir: "/character/ironclad" "/react_project_path/build/character/ironclad"
2020/09/09 15:46:29 [debug] 3322#3322: *13 trying to use file: "/index.html" "/react_project_path/build/index.html"
2020/09/09 15:46:29 [debug] 3322#3322: *13 internal redirect: "/index.html?"
2020/09/09 15:46:29 [debug] 3322#3322: *13 rewrite phase: 1
2020/09/09 15:46:29 [debug] 3322#3322: *13 test location: "/"
2020/09/09 15:46:29 [debug] 3322#3322: *13 using configuration "/"
2020/09/09 15:46:29 [debug] 3322#3322: *13 http cl:-1 max:1048576
2020/09/09 15:46:29 [debug] 3322#3322: *13 rewrite phase: 3
2020/09/09 15:46:29 [debug] 3322#3322: *13 post rewrite phase: 4
2020/09/09 15:46:29 [debug] 3322#3322: *13 generic phase: 5
2020/09/09 15:46:29 [debug] 3322#3322: *13 generic phase: 6
2020/09/09 15:46:29 [debug] 3322#3322: *13 generic phase: 7
2020/09/09 15:46:29 [debug] 3322#3322: *13 access phase: 8
2020/09/09 15:46:29 [debug] 3322#3322: *13 access phase: 9
2020/09/09 15:46:29 [debug] 3322#3322: *13 access phase: 10
2020/09/09 15:46:29 [debug] 3322#3322: *13 post access phase: 11
2020/09/09 15:46:29 [debug] 3322#3322: *13 generic phase: 12
2020/09/09 15:46:29 [debug] 3322#3322: *13 try files handler
2020/09/09 15:46:29 [debug] 3322#3322: *13 http script var: "/index.html"
2020/09/09 15:46:29 [debug] 3322#3322: *13 trying to use file: "/index.html" "/react_project_path/build/index.html"
2020/09/09 15:46:29 [debug] 3322#3322: *13 try file uri: "/index.html"
2020/09/09 15:46:29 [debug] 3322#3322: *13 generic phase: 13
2020/09/09 15:46:29 [debug] 3322#3322: *13 content phase: 14
2020/09/09 15:46:29 [debug] 3322#3322: *13 content phase: 15
2020/09/09 15:46:29 [debug] 3322#3322: *13 content phase: 16
2020/09/09 15:46:29 [debug] 3322#3322: *13 content phase: 17
2020/09/09 15:46:29 [debug] 3322#3322: *13 content phase: 18
2020/09/09 15:46:29 [debug] 3322#3322: *13 http filename: "/react_project_path/build/index.html"
2020/09/09 15:46:29 [debug] 3322#3322: *13 add cleanup: 0000556469E3EB80
2020/09/09 15:46:29 [debug] 3322#3322: *13 http static fd: 14
2020/09/09 15:46:29 [debug] 3322#3322: *13 http set discard body
2020/09/09 15:46:29 [debug] 3322#3322: *13 http ims:1599567927 lm:1599567927
2020/09/09 15:46:29 [debug] 3322#3322: *13 http im:"W/"5f577837-8e2"" etag:"5f577837-8e2"
2020/09/09 15:46:29 [debug] 3322#3322: *13 xslt filter header
2020/09/09 15:46:29 [debug] 3322#3322: *13 HTTP/1.1 304 Not Modified
2020/09/09 15:46:29 [debug] 3322#3322: *13 write new buf t:1 f:0 0000556469EAAF10, pos 0000556469EAAF10, size: 189 file: 0, size: 0
2020/09/09 15:46:29 [debug] 3322#3322: *13 http write filter: l:1 f:0 s:189
2020/09/09 15:46:29 [debug] 3322#3322: *13 http write filter limit 0
2020/09/09 15:46:29 [debug] 3322#3322: *13 posix_memalign: 0000556469EAC6D0:512 @16
2020/09/09 15:46:29 [debug] 3322#3322: *13 malloc: 0000556469EB15C0:16384
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL buf copy: 189
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL to write: 189
2020/09/09 15:46:29 [debug] 3322#3322: *13 SSL_write: 189
2020/09/09 15:46:29 [debug] 3322#3322: *13 http write filter 0000000000000000
2020/09/09 15:46:29 [debug] 3322#3322: *13 http finalize request: 0, "/index.html?" a:1, c:2
2020/09/09 15:46:29 [debug] 3322#3322: *13 http request count:2 blk:0
2020/09/09 15:46:29 [debug] 3322#3322: *13 http finalize request: -4, "/index.html?" a:1, c:1
2020/09/09 15:46:29 [debug] 3322#3322: *13 set http keepalive handler
2020/09/09 15:46:29 [debug] 3322#3322: *13 http close request
2020/09/09 15:46:29 [debug] 3322#3322: *13 http log handler
2020/09/09 15:46:29 [debug] 3322#3322: *13 run cleanup: 0000556469E3EB80
2020/09/09 15:46:29 [debug] 3322#3322: *13 file cleanup: fd:14
2020/09/09 15:46:29 [debug] 3322#3322: *13 free: 0000556469E3DC90, unused: 0
2020/09/09 15:46:29 [debug] 3322#3322: *13 free: 0000556469EAAA50, unused: 2427
2020/09/09 15:46:29 [debug] 3322#3322: *13 free: 0000556469DF3390
2020/09/09 15:46:29 [debug] 3322#3322: *13 hc free: 0000000000000000
2020/09/09 15:46:29 [debug] 3322#3322: *13 hc busy: 0000000000000000 0
2020/09/09 15:46:29 [debug] 3322#3322: *13 free: 0000556469EB15C0
2020/09/09 15:46:29 [debug] 3322#3322: *13 reusable connection: 1
2020/09/09 15:46:29 [debug] 3322#3322: *13 event timer add: 3: 65000:23215262

此时，

我认为流量没有到达 Django 甚至 GUnicorn，并且似乎被 NGINX 中的 SSL 错误阻止。

但我仍然认为我没有足够的信息来找到错误的原因。

请给我一个建议，谢谢。

【问题讨论】：

我相信你应该添加 SSL 证书
@dsfx3d 什么是添加？您的意思是在 NGINX 的 conf 中添加证书路径？
您是否在项目的 apache conf 文件中添加了证书？
@ShahidTariq 阿帕奇？但我使用 NGINX。它们都是Web服务器。所以我卸载了不必要的 Apache。还需要吗？
你能在服务器上检查你的 conf 文件并检查它是否包含你创建的证书的路径

标签： django reactjs nginx django-rest-framework gunicorn

【解决方案1】：

解决方法其实很简单，只要在listen 8000后加上'ssl'即可。

...
server {
    listen 8000 ssl;
    server_name mydomain;

    ssl_certificate /etc/letsencrypt/live/mydomain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mydomain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    charset utf-8;

    location / {
        include proxy_params;
        proxy_pass https://unix:/django_project_path/gunicorn.sock;
    }

    location /static/ {
        alias /django_project_path/static/;
    }

    location /media/ {
        alias /django_project_path/media/;
    }
}

【讨论】：

只是好奇，你为什么要添加 ssl 让它工作。每当我做listen 80 时，我都不需要添加 ssl