• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

질문있습니다.

21.11.17 14:20 작성 조회수 238

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 이슈가 없는 것 아닌가요??
어떤식으로 해결해야되는지 궁금합니다.

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

course-thumbnail

Vue로 Nodebird SNS 만들기

답변 1

답변을 작성해보세요.

0

조현영님의 프로필

조현영

지식공유자

2021.11.17

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

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

cool님의 프로필

cool

질문자

2021.11.17

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

  app.use(cors({
    origin: 'https://nodebird.com',
    credentials: true,
}));
조현영님의 프로필

조현영

지식공유자

2021.11.17

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

이 글과 비슷한 Q&A