배포 중 axios 의 CORS 오류

 

 

 

 

 

만날 수 있는 cors 오류를 모두 만난 모습   :   )    (ㅠ)

 

 

Axios와 Express의 cors에서 POST 요청이 충돌하고 있다. axios설정과 서버의 index.js에서 cors 설정을 모두 바꾸어 주어야 한다.. 리액트에서 AXIOS 요청을 보낼 때 크리덴셜을 true로 하고, 백엔드를 설정했는데 그때마다 다른 오류를 만났다 ㅠㅠ

 

 

 

 

구글링한 결과를 따라 아래 코드를 사용하였더니, 와일드카드 에러가 남았다.

app.use(
  cors({
    origin: "*", // 출처 허용 옵션
    credential: "true", // 사용자 인증이 필요한 리소스(쿠키 ..등) 접근
  })
);

 

 

 

true로 바꾸면 된다는 말이 있어서 해보았는데 해결이 되지 않음..

app.use(
  cors({
    origin: true, 
    credential: true, 
  })
);

 

 

 

true를 문자열 "true"로 바꾸면 된다는 말이 있어서 해봤는데 인식을 못했다.

app.use(
  cors({
    origin: "true", 
    credential: "true", 
  })
);

 

 

 

 

그러다가 광명과 같은 블로그를 찾았고, origin에는 직접 주소값을, 허용할 메소드에도 직접 값을 주는 것으로 성공했다. ㅠㅠ

app.use(
  cors({
    origin: [
      "백엔드배포한주소",
      "프론트배포한주소",
      "http://localhost:8080",
    ],
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    preflightContinue: false,
    optionsSuccessStatus: 204,
    credentials: true,
  })
);

 

 

 

 

나를 살려주신 글 : https://lab.cliel.com/entry/nodejs-CORS