Below you will find pages that utilize the taxonomy term “Frontend”
Vite + Build + Root
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
Streamlit에 Google login 컴포넌트를 만들어 넣고 있는데, URL로 불러오면 잘 보이는 것이 build해서 File로 serving하면 위와같은 메시지를 뿌린다.
뭘까? 한참을 읽어보고 network tab에서 읽어들이는 위치를 찾아보고 나서 이해가 된다.
http://localhost:9020/component/login_component.login_component/index.html?streamlitUrl=http%3A%2F%2Flocalhost%3A9020%2F
이 녀석이 Vite에서 생성된 index.html을 Streamlit에서 호출하는 녀석인데, Build된 녀석은 나름 저 혼자 돌아가는줄 알고 있을터이니, 빌드한 결과가 “/“로 잡혀있을 것이 분명했다.
Swagger + OAuth2
목표
- swagger에서
- google oauth를 swagger authorize ui에 적용
- 인증된 Token을 각 API에서 Header에 설정 할 수 있도록
custom open api
from fastapi.security.oauth2 import OAuth2AuthorizationCodeBearer
from fastapi.openapi.models import OAuthFlows as OAuthFlowsModel, OAuthFlowAuthorizationCode
from fastapi.openapi.models import SecurityScheme as SecuritySchemeModel
from fastapi.openapi.utils import get_openapi
# --------------------------------------------------------------
# Google oAuth2
CLIENT_ID = "...알아서"
CLIENT_SECRET = "...알아서"
TOKEN_URL = "...알아서"
AUTHORIZATION_URL = "...알아서"
class OAuth2Google(OAuth2AuthorizationCodeBearer):
def __init__(self):
super().__init__(authorizationUrl=AUTHORIZATION_URL, tokenUrl=TOKEN_URL)
oauth2_scheme = OAuth2Google()
# --------------------------------------------------------------
# Auth for Swagger
def custom_openapi():
if app.openapi_schema:
return app.openapi_schema
openapi_schema = get_openapi(
title="FastAPI with Google OAuth2",
version="1.0.0",
description="This is a FastAPI application integrating Google OAuth2",
routes=app.routes,
)
openapi_schema["components"]["securitySchemes"] = {
"OAuth2Google": {
"type": "oauth2",
"flows": {
"authorizationCode": {
"authorizationUrl": AUTHORIZATION_URL,
"tokenUrl": TOKEN_URL,
"scopes": {
"openid": "OpenID Connect",
"email": "Access to your email address",
"profile": "Access to your basic profile info"
}
}
}
}
}
app.openapi_schema = openapi_schema
return app.openapi_schema
# open api 변경
app.openapi = custom_openapi
이런 간단한 코드로 아래와 같은 훌륭한 화면을 도출 해 낼 수 있었으나.