将 FastAPI 应用程序嵌入为 iframe 时如何修复混合内容错误

Question

我正在 Google Cloud Run 上使用 NiceGUI (fastAPI) 部署 Web 应用程序。主应用程序通过 HTTPS 提供服务，但我将子应用程序 (Chainlit) 作为 iframe 嵌入到主应用程序中。 Chainlit 应用程序作为 FastAPI 子应用程序安装。

当我加载主应用程序（本地或远程服务）时，我收到混合内容错误，并且 Chainlit 端点未加载：“混合内容：'https://main-app.a.run.app/ 的页面” ”通过 HTTPS 加载，但请求了不安全的框架“http://main-app.a.run.app/chat/”。该请求已被阻止；内容必须通过 HTTPS 提供。

据观察，当我使用浏览器检查器工具手动将 iframe URL 更改为其他内容然后再次放回时，iframe 会正确加载。

问题：什么可能导致子应用程序默认使用 HTTP，以及如何确保它始终通过 HTTPS 提供服务以避免混合内容错误？

我的实现：

from nicegui import context, app, ui

import chainlit as cl
from chainlit.utils import mount_chainlit


ui.html(f'<iframe id="chat_frame" src="{CHAINLIT_BASE_URL}" style="width: 100%; height: 100%; border: none;"></iframe>').classes('w-full h-full')

@app.middleware("http")
async def add_security_headers(request, call_next):
    response = await call_next(request)
    
    # Content Security Policy header for iframe embedding
    response.headers['Content-Security-Policy'] = f"frame-ancestors 'self' {URL_REMOTE};"

    return response

mount_chainlit(app=app, target="chainlit_app.py", path="/chat")  # Mount the Chainlit app

ui.run(title=TITLE, favicon=FAVICON, storage_secret=API_KEY,
       host=BASE_URL, port=PORT)

Answer 1

我们需要删除末尾的“/”

混合 http 和 https 错误代码

@router.post("/posts/")
def create_new_post(post: Post, session: Session = Depends(get_session)):
    return create_post(session, post)

解决方案删除前端和后端应用程序中网址末尾的“/”

@router.post("/posts")
    def create_new_post(post: Post, session: Session =Depends(get_session)):
        return create_post(session, post)

来源： https://github.com/fastapi/fastapi/discussions/8706