Access-Control-Allow-Origin을 넣어도 POST에서 CORS 에러가 발생할때

React 개발을 시작하면서 PHP로 Restfull API 서버를 구성했다. 

 

React는 dev 모드로 로컬호스트에서 실행되고 있고, 서버는 실서버를 바라보게 설정했다. 

api 서버도 로컬에 테스트로 열어놓으면 좋겠지만 PHP로 구성되어 있어서 (Spring이면 로컬에서 돌렸을텐데)

귀찮음에 항복하고 실서버를 바라보게 설정해버렸다.

 

로컬호스트에서 실행되는 스크립트가 실제 도메인을 가진 서버를 바라보고 있으니 당연히 CORS 에러가 발생했다. 

*CORS에 대한 글

 

그런데 Access-Control-Allow-Origin 헤더를 넣어도 GET을 제외한 POST, PUT, DELETE에서 CORS에러가 발생하고 있었다.

 

그 이유는 React에서 api를 호출하기 위해 Axios를 사용하고 있었는데, 

Axios가 기본적으로 도메인이 같지 않으면 GET을 제외한 나머지 메소드들에 대해서 실제 전송보다 먼저 OPTIONS 요청을 보내 api 호출이 가능한지 테스트해보고 있었기 때문이였다. 

 

PHP Restfull API 서버에서 Route하면서 사용할 메소드는 세팅해놨지만 OPTIONS은 쓸 생각을 못해서

405 Method not allow 에러가 떨어지고 있기 때문에

Axios에서 GET을 제외한 요청들을 실패하고 있었던 것이다.

 

인터넷에서 찾아봐도 동일하게 OPTIONS 메소드에 대해서 허용을 안해줘서 CORS가 발생한다고 써있어서 당연히 이게 문제일 줄 알았다.

 

근데 이게 왠걸

OPTIONS 메소드에 대해서도 200 OK에 Access-Control-Allow-Origin까지 리턴되고 있는데도 실제 요청은 실패했다.

 

도대체 왜...?

 

그러던 중 어렵사리 해결책을 찾았다.

 

Access-Control-Allow-Origin: http://localhost // ← 원래 있던 헤더

Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

 

추가적으로 위와 같은 헤더를 넣어주니 깔끔하게 해결이 되어버렸다.

 

MDN에 따르면 Access-Control-Allow-Methods 헤더는 CORS 허용이 가능한 메소드를 지정해주는 헤더라고 한다.

그동안은 아무리 OPTIONS 메소드에 대해 200을 리턴해도 사용이 가능한 메소드를 별도로 지정해주고 있지 않아 몽땅 실패해버렸던 것이다. 

 

따라서 OPTIONS 요청에 허용가능한 헤더를 넣어주니 성공적으로 요청을 보낼 수 있게 되었다.

 

CORS를 해결할땐 나머지 헤더도 세트로 넣어줘야 할 것 같다.