인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

cool님의 프로필 이미지
cool

작성한 질문수

Vue로 Nodebird SNS 만들기

질문있습니다.

작성

·

326

0

강사님 
store action에 아래 소스와 같이 적용하면 에러가 뜹니다.

CHECK_ID({ commit }, data) {
        this.$axios.post('/sign/used-id', data, {
          withCredentials: true,
        })
        .then((response) => {        
          commit('SET_USER', response.data.user);
          commit('SET_TOKEN', response.data.token);         
        })
        .catch((err) => {
          console.log(err);
        })
    },

Access to XMLHttpRequest at 'http://test.test.co.kr/api/sign/checked-id' from origin 

http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is

'' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.


이와 반대로 아래 소스와 같이 withCredentials:true를 지우면 api가 성공적으로 실행되더라구요.

CHECK_ID({ commit }, data) {
        this.$axios.post('/sign/used-id', data)
        .then((response) => {
          commit('SET_USER', response.data.user);
          commit('SET_TOKEN', response.data.token);
        })
        .catch((err) => {
          console.log(err);
        })
    },


withCredentials:true를 추가해야 cors 이슈가 없는 것 아닌가요??
어떤식으로 해결해야되는지 궁금합니다.

답변 부탁드리겠습니다 ㅎㅎ ㅠ

답변 1

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

withCredentials는 cors보다는 쿠키를 전달하는데 목적이 있습니다. 이게 없으면 쿠키가 없어져서 서버쪽에서 프론트 요청이 누구한테서 온 것인지 알 수 없습니다.

에러는 cors 에러가 맞는데요. 서버쪽에서 cors 설정 하셔야 합니다.

cool님의 프로필 이미지
cool
질문자

강사님이 말씀하신 설정은 아래 소스의 credentials: true, 맞을까요? ㅎㅎ

  app.use(cors({
    origin: 'https://nodebird.com',
    credentials: true,
}));
제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

credentials가 withCredentials와 이어지는 것이고요. 위에 origin을 바꾸셔야죠.

cool님의 프로필 이미지
cool

작성한 질문수

질문하기