로컬에서 간단하게 CORS 에러 확인하기

CORS 에러는 Postman을 통해서 확인할 수 없다.

 

 

1. 개발자 도구 들어가기

• Chrome -> 개발자 도구(F12) -> Console

 

2. 서버 API 호출

• 아래 스크립트를 자신의 API 스펙에 맞게 수정해 1에서 실행

fetch("http://localhost:8080/signup", {
    method: 'POST', 
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    body: JSON.stringify({
        "account": "leo0842",
        "nickname": "eden",
        "password": "Password123!",
        "address": "에덴동산",
        "phoneNumber": {
            "start": "010",
            "middle": "1234",
            "last": "5678"
        }})
    })
.then((response) => console.log(response));

 

# Error 1 - json 데이터가 text/plain 형식으로 보내지는 현상

fetch 전송 시 "mode: 'no-cors'" 옵션을 주었기 때문에 발생.

해당 mode는 JSON 형식의 데이터 전송을 허용하지 않는다.

👉 자세한 사항: https://stackoverflow.com/questions/39689386/fetch-post-json-data-application-json-change-to-text-plain

Fetch: post json data, application/json change to text/plain

 

# Error 2 - fetch가 실행 안되는 현상

별 생각 없이 구글 초기 화면에서 실행했는데 돌아가지 않았다.

javascript를 지원하지 않는 정적 페이지에서 시도했기 때문에 발생한 것이라 예상한다.

우테코 페이지, 네이버 페이지 등에서 재시도 하니 잘 돌아갔다.

 

 

같이 찾아준 이프 땡큐^ㅡ^b