您能否从启用SSL的安全ReactJs应用程序通过普通HTTP调用ExpressJS托管的REST API？

好的，我的web应用程序在ReactJS中，我的RESTAPI在ExpressJS下运行。在Mac上的开发环境中，我没有任何SSL设置，因此，我的站点运行在say上http://localhost:3000 我的ExpressJs服务器运行在另一个端口上，比如8000。它们都通过HTTP进行通信，工作正常

现在在UAT中，我将Nginx作为我的ReactJS应用程序的反向代理。Nginx为我的站点安装了SSL证书，我可以通过HTTPs访问我的站点。我的API使用ExpressJs在普通HTTP上运行在不同的主机上，即没有SSL设置

现在，当我的ReactJS应用程序尝试进行web服务调用以使用来自Express服务器的REST API时，我会收到关于混合请求包的错误，即我的站点位于HTTPS上，但尝试通过普通HTTP与API服务器通信。见下文

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '<URL>'. This request has been blocked; the content must be served over HTTPS.

Mixed Content: The page at 'https://<host>/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://<apihost>/api/Security/Users'. This request has been blocked; the content must be served over HTTPS.

混合内容：“”处的页面通过HTTPS加载，但请求了不安全的XMLHttpRequest终结点“”。此请求已被阻止；内容必须通过HTTPS提供。
混合内容：“https://”处的页面已通过https加载，但请求了不安全的XMLHttpRequest端点”http:///api/Security/Users'. 此请求已被阻止；内容必须通过HTTPS提供。

---

有没有办法在不启用ExpressJS API HTTPS的情况下覆盖此选项？如果答案是否定的，那么如何设置ExpressJS以使用HTTPS，即人们是否将Nginx安装为反向代理并在Nginx中配置证书。就像我为React应用程序所做的一样。非常感谢您的帮助。

是的，我们必须使用Nginx作为前端（https）和后端（https）之间通信的反向代理。 我的ReactJs应用程序以http运行，并配置了Nginx和证书。 我引用了这个链接- 使用Nginx和证书部署ReactJs。 在/etc/nginx/sites enabled文件夹中，我有2个文件-a.docis.live和default

/etc/nginx/站点已启用/默认

# Default server configuration
#
#server {
#   listen 80 ;

#   listen [::]:80;

    # SSL configuration
    #
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;

#   root /var/www/html;

    # Add index.php to the list if you are using PHP
#   index index.html index.htm index.nginx-debian.html;

#   server_name _;

#   location / {
        # First attempt to serve request as file, then
#       # as directory, then fall back to displaying a 404.
#       include uwsgi_params;
 #       uwsgi_pass unix:/root/backendOne/pyflaskone/myproject.sock;
#       try_files $uri $uri/ =404;
#   }

    # pass PHP scripts to FastCGI server
    #
    #location ~ \.php$ {
    #   include snippets/fastcgi-php.conf;
    #
    #   # With php-fpm (or other unix sockets):
    #   fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    #   # With php-cgi (or other tcp sockets):
    #   fastcgi_pass 127.0.0.1:9000;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #   deny all;
    #}

#}

# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#   listen 80;
#   listen [::]:80;
#
#   server_name example.com;
#
#   root /var/www/example.com;
#   index index.html;
#
#   location / {
#       try_files $uri $uri/ =404;
#   }
#}

server {

    # SSL configuration
    #
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;

    root /root/frontEndOne/pyflaskone/FRONT/late-checker/build;

    # Add index.php to the list if you are using PHP
#   index index.html index.htm index.nginx-debian.html;
    server_name allspice.docis.live; # managed by Certbot


    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
#        include uwsgi_params;
 
#       uwsgi_pass unix:/root/backendOne/pyflaskone/myproject.sock;
#       try_files $uri $uri/ =404;
    }

    # pass PHP scripts to FastCGI server
    #
    #location ~ \.php$ {
    #   include snippets/fastcgi-php.conf;
    #
    #   # With php-fpm (or other unix sockets):
    #   fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    #   # With php-cgi (or other tcp sockets):
    #   fastcgi_pass 127.0.0.1:9000;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #   deny all;
    #}


#    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/allspice.docis.live/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/allspice.docis.live/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


    add_header Strict-Transport-Security "max-age=31536000" always; # managed by Certbot

}
server {
    if ($host = allspice.docis.live) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    listen 80;
    listen [::]:80;

    # SSL configuration
    #
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    # Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;

    root /root/frontEndOne/pyflaskone/FRONT/late-checker/build;

    # Add index.php to the list if you are using PHP
#   index index.html index.htm index.nginx-debian.html;
    server_name allspice.docis.live; # managed by Certbot


    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
    #   include uwsgi_params;
       # uwsgi_pass unix:/root/backendOne/pyflaskone/myproject.sock;
#   try_files $uri $uri/ =404;
    }

    # pass PHP scripts to FastCGI server
    #
    #location ~ \.php$ {
    #   include snippets/fastcgi-php.conf;
    #
    #   # With php-fpm (or other unix sockets):
    #   fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
    #   # With php-cgi (or other tcp sockets):
    #   fastcgi_pass 127.0.0.1:9000;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #   deny all;
    #}


}

在这里，我在这个位置/root/frontEndOne/pyflaskone/FRONT/latechecker/build为late checker应用程序构建了我的版本

我还将Flask应用程序作为http运行，并配置了Nginx和证书。 /etc/nginx/sites enabled/a.docis.live

server {
        listen 80;
        listen [::]:80;

      #  root /root/frontEndOne/pyflaskone/FRONT/late-checker/build;
        #index index.html index.htm index.nginx-debian.html;
        
        server_name allspice-api.docis.live;

        location / {
        include uwsgi_params;
        uwsgi_pass unix:/root/backendOne/pyflaskone/myproject.sock;
                try_files $uri $uri/ =404;
        }

# listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/allspice-api.docis.live/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/allspice-api.docis.live/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


    add_header Strict-Transport-Security "max-age=31536000" always; # managed by Certbot


}

两者都在本地系统和服务器上作为http运行。我们刚刚添加了使用https前缀运行应用程序的证书

---

信用：Suhail用于Nginx和证书配置。

“有没有办法在不启用ExpressJS API HTTPS的情况下覆盖此功能？”-没有。“人们是否将Nginx安装为反向代理并在Nginx中配置证书。就像我为React应用程序所做的一样”-是的。谢谢Steffen。将遵循Krisha在下面提到的内容。谢谢@Krishna，因此，我也遵循了DigitalOcean指南，使用SSL设置了我的React前端，该位工作正常。我的基于ExpressJs的API位于不同的服务器上，目前正在使用ExpressJs运行，没有任何反向代理。根据您的回答，我想我必须在API服务器上安装\setup nginx，并将我的API web应用配置为SSL应用。谢谢Krishna和Steffen。终于成功地让它工作了。我几乎遵循了奎师那的指导方针，但有几个例外，因为我的是ExpressJs。下面是我的ssl.conf。我的expressjs服务器在端口8000上运行。位置/{proxy_pass；}}