[ASP.NET Core] CORS 오류 "blocked by CORS policy" 원인과 설정

브라우저에서 프론트엔드와 API를 따로 띄우면 만나는 blocked by CORS policy 오류의 원인과 최소 설정입니다.

절차

1. 에러 메시지 확인
2. 서버 설정
3. 미들웨어 위치
4. 자주 하는 실수

 

1. 에러 메시지

Access to fetch at 'http://localhost:5000/api/values' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS는 브라우저가 막는 것이지 서버가 요청을 거부한 것이 아닙니다. 서버 로그에는 200으로 찍히는데 화면에서만 실패하는 이유입니다.

2. 서버 설정

builder.Services.AddCors(o =>
    o.AddPolicy("front", p => p
        .WithOrigins("http://localhost:3000", "https://app.example.com")
        .AllowAnyHeader()
        .AllowAnyMethod()));

3. 미들웨어 위치

app.UseRouting();
app.UseCors("front");      // UseRouting 뒤, UseAuthorization 앞
app.UseAuthentication();
app.UseAuthorization();
app.MapControllers();

AllowAnyOrigin()과 AllowCredentials()는 함께 쓸 수 없습니다. 쿠키 인증을 쓴다면 WithOrigins로 정확한 주소를 적어야 합니다.

4. 자주 하는 실수

1. 프로토콜·포트·www 유무가 다름 — http와 https는 다른 origin
2. UseCors를 MapControllers 뒤에 둠 — 헤더가 붙지 않음
3. 에러 응답(401·500)에 CORS 헤더가 빠져 브라우저에는 CORS 오류로만 보임
4. 프록시(Nginx)에서 Access-Control-Allow-Origin을 중복으로 붙임

정리

1. origin은 정확히 적는다
2. 미들웨어는 라우팅 뒤·인증 앞
3. 인증 오류가 CORS처럼 보이면 서버 응답을 직접 확인