[Blazor] 외부 API 연동 시 HttpClient - CORS policy

blazor로 테스트를 진행하다보면, An unhandled error has occurred 오류를 자주 만난다

 

사실 제가 예외처리를 완전히 안해두어서 이렇게 뜨는 것이긴 합니다..

이럴 땐 놀래지말고 F12를 눌러 오류 코드를 확인하면 됩니다.

 

 

버튼 클릭 시 외부 API를 연동하고자했는데, 해당 부분에서 IHttpClientFactory 서비스를 찾을 수 없어서 발생하는 문제였습니다.

이 오류는 Blazor WebAssembly에서 HttpClient를 직접 주입받아 사용하는 경우에 발생할 수 있습니다.

 

Blazor WebAssembly에서 HttpClient를 사용하는 일반적인 방법은 IHttpClientFactory가 아닌, HttpClient를 직접 주입하는 것입니다. 만약 IHttpClientFactory를 사용하려면, 이를 등록해야 하고, 사용하는 방법도 다릅니다.

먼저, Program.cs 파일에서 IHttpClientFactory를 등록하도록 수정해야 합니다. (원래 이렇게 했는데)

// HttpClient 등록
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://localhost:5284") });

 

그리고 Home.razor 페이지 씬에서 IHttpClientFactory 대신 HttpClient를 사용하도록 수정해야합니다.

@inject IHttpClientFactory ClientFactory

저희는 HttpClient를 등록했기에 위에 것이 아니라 @inject HttpClient Http 이것만 사용하는 것!

 

-> 추후 발견했는데 주소를 2개 이상 사용하려면 @inject IHttpClientFactory ClientFactory 를 써야하긴 합니다.

// 게임 API 주소를 가진 HttpClient 등록 (program.cs)
builder.Services.AddHttpClient("GameAPI", client =>
{
    client.BaseAddress = new Uri("http://localhost:5105");
});

var gameClient = ClientFactory.CreateClient("GameAPI"); // HttpClientFactory 사용
var gameResponse = await gameClient.PostAsJsonAsync("login", gameLoginData);

이렇게 의존성 주입으로 등록한 서비스의 종류에 맞게 잘 사용하면 되는 듯 하다.

 

두근

 

CORS 정책 이슈로 인해 막혔습니다.

Access to fetch at 'http://localhost:5284/Account/register' from origin 'http://localhost:5275' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

엄.. 포스트맨이나 다른 곳에서 테스트할 땐 괜찮았는데.. 우선 CORS 설정을 서버 측에 해줍시다.

.NET core 8.0 이므로 program.cs 파일에 해당 부분을 추가해줍니다.

// CORS 정책 추가
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAllOrigins",
        builder =>
        {
            builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader();
        });
});

// ... 다른 의존성 추가

// CORS 미들웨어 추가
app.UseCors("AllowAllOrigins");

미들웨어 추가까지 잊지 마세요!

 

이러면 정상적으로 CORS 정책이 추가되어 호출됩니다~!

 

굿~