웹 개발을 시작할 때 겪었던 이슈로

먼저 cors는 서로 다른 오리진 (호스트, 포트, 프로토콜)간의 자원 공유를 제한하는 정책이다. 웹개발을 하다보면 다들 한번씩 마주칠만한 에러이다.

해결하는 방법도 간단하다. 요청을 받는 서버에서 이를 허가를 해주면 된다.

SPRING

먼저 Spring에서는 다음과 같이 설정하면 된다.

참고로 allowedOrigins에 ‘*’은 안되니 주의하자.(보안상으로도 하면 안될 것이다.)

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        	.allowedOrigins("<http://localhost:8080>", "<http://localhost:8081>") // 허용할 출처
            .allowedMethods("GET", "POST") // 허용할 HTTP method
            .allowCredentials(true) // 쿠키 인증 요청 허용
            .maxAge(3000) // 원하는 시간만큼 pre-flight 리퀘스트를 캐싱
    }
}

FastAPI

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

app = FastAPI()

origins = [
    "<http://localhost.tiangolo.com>",
    "<https://localhost.tiangolo.com>",
    "<http://localhost>",
    "<http://localhost:8080>",
]

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

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

공식 홈피에서 가져왔다.

미들웨어에 origins를 추가하여 해결할 수 있다.

또는 프론트에서는 프록시를 사용하여 해결할 수 있다.(이 부분은 나중에)