Flutter/Dart - 문제 해결. Error: XMLHttpRequest error.

Case.

Flutter http 라이브러리 사용하여 Server의 http 리소스를 얻는 과정에서 XMLHttpRequest error 오류 발생

( Web Chrome 에서 Application 실행 )

1. 원인

CORS(Cross-Origin Resource Sharing) 문제로 Front-end(Flutter) Localhost에서 Back-end(FastAPI) Localhost:8000으로 호출할 때, 같은 Localhost라도 서버에서는 이를 다른 origin으로 인식하므로 서버에서 모든 origin 요청을 허용해야 한다.

For security reasons, browsers restrict cross-origin HTTP requests initiated from scripts. For example, 
XMLHttpRequest and the Fetch API follow the  same-origin policy. 
- https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

1.1. 호출 소스 코드

  static Future<Map<String, dynamic>> selectUid(User user) async {
    var url = Uri.http('localhost:8000', '/uid/' + user.uid);
    var res = await http.get(url);

    ....

1.2. 오류 내용

Error: XMLHttpRequest error.
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 299:10  createErrorWithStack
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 341:28            _throw

2. 해결방법

2.1. 클라이언트 레벨

사실, 이 방법은 localhost에서 테스트를 위해 처리하기 위한 용도로 제한되어야 한다.

2.2. 해결 방법

1. flutter_tools.stamp 삭제

• where or which 명령으로 flutter 설치 위치 확인.
• flutter/bin/cache 이동
• flutter_tools.stamp 파일 삭제

2. chrome.dart 수정

• flutter/packages/flutter_tools/lib/src/web 이동
• chrome.dart 파일 수정
• --disable-extensions 아래에 --disable-web-security 입력

• 재기동 후 확인

2.2. 서버 레벨

서버에서 모든 origin요청을 허용한다.

FastAPI

from typing import Union

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

app = FastAPI()

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

@app.get("/uid/{user_uid}")
def select_uid(user_uid: str, q: Union[str, None] = None):
    print(user_uid)
    return {"uid": user_uid, "q": q}

• allow_origins='*' 모두 허용하거나, URI를 리스트로 등록할 수 있다.

Spring

@CrossOrigin(maxAge = 3600)
@RestController

• Controller에 @CrossOrigin 어노테이션을 설정한다. 인자로 URI를 특정할 수 있다.