从 https 到 fastapi/nginx 的 AJAX 帖子因混合模式而被阻止答案

【问题标题】：AJAX post from https to fastapi/nginx blocked for being mixed mode从 https 到 fastapi/nginx 的 AJAX 帖子因混合模式而被阻止
【发布时间】：2022-10-05 04:09:14
【问题描述】：

我有一个带有 javascript 的页面，它会调用与加载该页面的域相同的域，但它失败了。 chrome 控制台显示以下错误 “混合内容：'https://www.exampledomain.com/usermanage?wh=1' 的页面是通过 HTTPS 加载的，但请求了不安全的资源 'http://www.exampledomain.com/doupdate/'。这个请求已被阻止；内容必须通过 HTTPS 提供。”

javascript是：

fetch("/doupdate", { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload });

后端是 HTTP 上的 Fastapi，带有用于 HTTPS 的 Nginx

如果我通过 HTTP 加载完全相同的页面，它可以工作，但不能通过 HTTPS 工作。我已经尝试在 javascript 中将 URL 硬编码为 http://www.exampledomain.com/doupdate/ 以及当前的相对路径

这似乎是一个 CORS 问题，应该通过添加 fastapi cors 中间件来解决，所以我这样做了，但它没有帮助：

from fastapi.middleware.cors import CORSMiddleware    
app.add_middleware(CORSMiddleware, allow_origins=["http://www.exampledomain.com","https://www.exampledomain.com","http://www.exampledomain.com:8000"], allow_credentials=True, allow_methods=["*"], allow_headers=["*"],)

我怀疑这与 Nginx 和 Fastapi 之间发生请求转发的方式有关，但我不确定如何进一步解决此问题。

这是我的 /etc/nginx/sites-enabled/default ：

server {
root /apphome/app-fastapi;
    server_name   www.example.com;

location ~ /phpmyadmin {
            include proxy_params;
            proxy_pass http://127.0.0.1:8888;
    }

    location / {
            include proxy_params;
            proxy_pass http://127.0.0.1:8000;
    }
listen [::]:443 ssl ipv6only=on; # managed by Certbot
listen 443 ssl; # managed by Certbot
ssl_certificate /etc/letsencrypt/live/  www.example.com/fullchain.pem; # managed by Certbot
ssl_certificate_key /etc/letsencrypt/live/  www.example.com/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}

【问题讨论】：

标签： ajax nginx fastapi

【解决方案1】：

https://roryokeeffe.com/getjson-ajax-mixed-protocol-error-https-with-nginx/

需要添加行 proxy_set_header X-Forwarded-Proto $scheme; 到 nginx 配置的位置节点

【讨论】：