연습 - CORS 구성

완료됨

이번 연습에서는 로컬 Azure Functions에서 CORS(원본 간 리소스 공유)를 구성하고 Product Manager 애플리케이션을 구현합니다.

CORS 구성

  1. api/local.settings.json 파일을 엽니다.

  2. “Values” 속성 ‘아래’에 “Host” 섹션을 추가합니다. “Host”에서 값을 “CORS” 값을 “*”로 설정합니다.

    {
      "IsEncrypted": false,
      "Values": {
        "AzureWebJobsStorage": "",
        "FUNCTIONS_WORKER_RUNTIME": "node",
         "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
        "CONNECTION_STRING": "PASTE YOUR CONNECTION STRING HERE"
      },
      "Host": {
        "CORS": "*"
      }
    }
    
  3. API가 여전히 실행 중인 경우 디버그 표시줄에서 연결 끊기를 선택하여 프로세스를 다시 시작한 다음 F5 키를 눌러 다시 시작합니다.

프런트 엔드 앱 확인

  1. 프런트 엔드 앱은 여전히 포트 5000의 브라우저 탭에서 실행되어야 합니다. 페이지를 새로 고칩니다.

  2. 앱이 API에서 데이터를 로드합니다.

    데이터로 채워진 Products Manager 애플리케이션을 표시하는 웹 브라우저의 스크린샷

  3. 모든 엔드포인트가 작동하도록 제품을 만들고, 업데이트하고, 삭제해 보세요.

앱이 정상적으로 보입니다. 매우 양호합니다. 뛰어난 API 없이는 어떤 것도 불가능합니다. 배운 내용을 테스트할 준비가 되었나요?