브라우저의 개발자 도구에서 CORS 오류를 디버그하려면 어떻게해야합니까?

1. 개발자 도구 열기 : 대부분의 브라우저에서 F12 또는 Ctrl+Shift+i를 눌러 개발자 도구를 열 수 있습니다. 개발자 도구 패널이 열립니다.

2. 네트워크 탭으로 이동 : 개발자 도구에서 "네트워크"탭을 찾아 클릭하십시오. 이것은 페이지에서 작성한 모든 네트워크 요청을 보여줍니다.

3. CORS 실패 요청을 식별하십시오 : 빨간색으로 강조 표시되는 실패한 요청을 찾으십시오. 이들은 CORS가 실패한 요청 일 것입니다.

4. 요청 헤더 검사 : 실패한 요청을 클릭하여 자세한 내용을 확인하십시오. 그런 다음 "헤더"탭으로 이동하여 요청 및 응답 헤더를 검사하십시오.

5. Cors 관련 헤더 확인 : 다음 헤더를 찾으십시오.
-`Origin ': 이것은 요청이 어디에서 왔는지의 영역이어야합니다.
-`access-control-request-method ': 요청이 사용하려는 HTTP 방법이어야합니다.
-`access-control-allow-origin ': 이것은`origin` 헤더 또는 "*"와 동일해야합니다.
-`access-control-allower-methods ':`access-control-request-method`의 메소드가 포함되거나 "*"가 포함되어야합니다.

6. 헤더 해석 : CORS 관련 헤더가 존재하지 않거나 해당 값이 기대하는 것이 아닌 경우 서버는 CORS 요청을 처리하도록 올바르게 구성되지 않을 수 있습니다.

7. 문제 해결 : 누락되거나 잘못된 CORS 헤더를 기반으로 해당 CORS 헤더를 보내려면 서버 구성을 업데이트해야합니다. 여기에는 서버 측 코드 또는 프록시/로드 밸런서 설정을 업데이트하는 것이 포함될 수 있습니다.

브라우저의 개발자 도구를 사용하여 요청 및 응답 헤더를 검사하면 CORS 문제의 근본 원인을 신속하게 식별하고이를 해결하기 위해 필요한 단계를 수행 할 수 있습니다.