Below you will find pages that utilize the taxonomy term “Frontend”

fetch vs. form submit

모 회사의 EDMS 솔루션을 적용하면서 지극히 기초적인 부분에 대해서 고민한다.

문서 Viewer를 솔루션으로 도입을 했는데, 이 녀석은 request payload를 json형태로 받아들이고 있다.

그 덕분에 CORS를 회피하기 위한 popup submit방식은 사용 할 수 없어, 자연스럽게 설치되지 않으면 사용 할 수 없는 현상이 발생하고 있다.

  • fetch를 사용하면 CORS 정책으로 인해 에러가 발생할 수 있습니다. 이 경우 서버에서 CORS를 허용하도록 설정해야 합니다.
  • 서버가 CORS를 허용하지 않는 경우, 이전처럼 form submit 방식을 사용하거나 프록시 서버를 사용해야 합니다.

막연히 될 것이라 생각했던 부분이 안 되는 것을 실증 해 보고 자신의 어리석음을 다시 한 번 생각한다.

read more

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된 녀석은 나름 저 혼자 돌아가는줄 알고 있을터이니, 빌드한 결과가 “/“로 잡혀있을 것이 분명했다.

read more

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

이런 간단한 코드로 아래와 같은 훌륭한 화면을 도출 해 낼 수 있었으나.

read more