미들웨어 - 1

WSGI는 파이썬으로 만든 웹 어플리케이션을 웹 서버와 연결하는 프로그램입니다. 이와 마찬가지로 미들웨어는 서버와 애플리케이션 사이를 중계하는 일종의 프로그램으로 이해하시면 됩니다.

 

다음은 리스트는 클라이언트 웹 서버, CGI, Web Application Server, Web Application을 구분해 보았으니 !! 참고 하시면 됩니다.

• Client: Firefox, Chrome, Safari, Edge 등(웹 브라우저만 클라이언트인 것은 아닙니다)
• Web Server: Apache, nginx, IIS 등
• CGI: FastCGI, SCGI, WSGI 등
• Web Application Server(WAS): Tomcat, Gunicorn, Tornado 등
• Web Application: Spring Boot, ASP.NET, Flask, Django, FastAPI

해당 그림은 미들웨어를 나타내는 간단한 그림입니다.

 

이 그림의 왼쪽을 보면 서버 또는 케이트 웨어이고, 오른쪽은 웹 앱입니다. 클라이언트가 서버에 요청을 보내는 중간 사이에 미들 웨어들을 추가 할 수 있습니다. 그림을보면 미들웨어 1, 미들웨어 2, 미들웨어 3이 있다는 것을 알 수 있습니다.

 

여기서 주의할 점은 요청은 미들웨어 1, 미들웨어 2, 미들웨어 3 순서대로 요청이 들어오지만 return할 때는 반대로 미들웨어 3, 미들웨어 2, 미들웨어 1입니다. 이러한 구조의 흐름을 down stream이라고 합니다.

 

down stream이란 서버가 요청을 받고 처리를하는 가장 기본적인 형태라고 합니다.

 

미들 웨어를 적용하기 위한 코드를 작성해 보겠습니다.

다음은 미들 웨어를 적용하기 위한 main.py입니다.

 

import uvicorn
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware


app = FastAPI()

origins = [
    "http://localhost",
    "https://localhost:8000",
]


app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["OPTIONS", "GET"],
    allow_headers=["*"],
)


@app.get("/")
async def hello():
    return {"message": "Hello World"}

if __name__ == "__main__":
    uvicorn.run("main:app", reload = True)

 

백엔드 ↔ 프론트 서버가 분리되었을때 난감한 부분이 있습니다. 

대표적으로 CORS 문제가 있습니다.

• CORS에 대한 설명

Cross-Origin Resource Sharing (CORS) - HTTP | MDN

 

기본적으로 브라우저는 보안 상의 이유로 스크립트에서 다른 출처의 리소스를 요청하는 것을 제한합니다. 이를 "Same-Origin Policy"라고 부르며, 이 정책을 우회하기 위해 CORS 메커니즘이 도입되었습니다.

 

CORS는 서버가 특정 출처에서 온 요청을 수락하도록 허용하는 HTTP 헤더를 사용합니다.

 

이어서 코드를 실행해 보겠습니다.

python main.py

 

실행 후에 코드를 간략하게 살펴 보겠습니다.

origins = [
    "http://localhost",
    "https://localhost:8000",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["OPTIONS", "GET"],
    allow_headers=["*"],
)

 

위의 코드에서 origins라는 리스트를 정의하고, 위의 코드에서 fastapi에서 미들 웨어를 가장 간단하게 추가하는 방법은 app.add_middleware라는 함수를 통해서 미들 웨어를 추가해주면 됩니다.

 

app.add_middleware에 fastapi로 부터 import한 CORSMiddleware를 넘겨줍니다. 이후 아래 allow_origins, allow_creden tials, allow_methods, allow_headers등의 인자는 우리가 import한 CORSMiddleware에 넘겨주는 인자들입니다.

 

각각의 인자들에 대해서 설명은 다음과 같습니다.:

• allow_origins : 해당 주소 목록들만 접속을 허용하겠다라는 의미입니다.
  
  • 여기서는 origins에 있는 주소들만 허용
• allow_credentials :  접속을 허용하겠다라는 의미입니다.
• allow_methods : HTTP Method를 허용 -> code상에서는 "OPTIONS", "GET"을 허용
  • OPTIONS : 서버에 어떤 것들을 허용 받을 수 있는지를 먼저 요청을 보낼때 사용을 합니다.
  • GET : 요청을 처리한다라는 의미를 가지있습니다.
• allow_headers : "*"을 사용해서 모든 header를 허용

 

HTTPie를 사용해서 서버에 요청을 보내 봅시다. HTTPie를 사용해서 OPTIONS method를 사용해서  GET이라는 method를 허용해 좋으면 좋겠다라고 요청을 보냈습니다.

http OPTIONS :8000 Origin:http://localhost Access-Control-Request-Method:GET

 

결과 : 

 

실제 업무에서는 프론트와 백엔드 개발자가 따로 개발을 하는 경우가 있는데, 이때 CORS 문제가 발생을 한다. 그럴 경우, 이렇게 CORS 문제를 해결해 달라는 요청이 올 수 도 있기 때문에 필요한 내용이라고 합니다.