CORS오류 해결

웹의 프론트 엔드를 대발하는 중 프론트에서 데이터를 받아 와 정보를 뿌려야 하는 일이 있었는다.

하지만 요청을 해도 그 요청의 리턴값이 안 나온다.

그래서 개발자 모드로 콘솔을 봤더니 cors오류를 해결하라고 메시지를 보냈다.

교차 출처 리소스 공유(Cross-origin resource sharing, CORS), 교차 출처 자원 공유는 웹 페이지상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. 웹페이지는 교차 출처 이미지, 스타일시트, 스크립트, iframe, 동영상을 자유로이 임베드할 수 있다. 특정한 도메인 간(cross-domain) 요청, 특히 Ajax 요청은 동일-출처보안정책(SOP)에 의해 기본적으로 금지된다.

출처 : https://ko.wikipedia.org/wiki/%EA%B5%90%EC%B0%A8_%EC%B6%9C%EC%B2%98_%EB%A6%AC%EC%86%8C%EC%8A%A4_%EA%B3%B5%EC%9C%A0

교차 출처 리소스 공유 - 위키백과, 우리 모두의 백과사전

간단히 http를 사용하는 브라우저에서 다른 브라우저로 데이터를 보낼때 sop가 막고있는데, 이를 cors를 이용해 뚫어야 한다는 것이다.

이 방법은 3가지가 있는데 

1. 브라우저에 별도의 세팅을 해준다.

이 방법은 그냥 테스트용으로 사용하는 것이 좋다.(그냥 postman에서 데이터가 오는지 확인하는 방법도 있다.)

실제 서비스를 할 경우 이 방법은 사용자 개인이 따로 설정해주어야 하고 보안이 떨어지기 때문이다.

https://velog.io/@qortmdalsdl/CORS-%EC%A0%95%EB%A6%AC%EC%99%80-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-Chrome 

CORS 정리와 해결 방법 (Chrome)

2. 서버에서 설정

이 방법은 서버측의 header에 4줄

header('Access-Control-Allow-Origin: *');

header('Access-Control-Max-Age: 86400');

header('Access-Control-Allow-Headers: x-requested-with');

header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');

을 추가하면 된다. (php기준)

하지만 서버 개발자가 자신이 할 일이 아니라고 미루는 경우 프론트 측에서 해야하는 경우도 있다.

3. 프록시 서버 사용

이 방법은 프론트와 백엔드 쪽에 다른 서버를 두어 문제를 해경하는 방법이다.

https://pendidikan.co.id/tag/pengertian-external-proxy/

한마디로 서버와 클라인트에 cors문제를 해결한 서버를 두고 원래있던 서버에서 프록시 서버로 JSON데이터를 가져오고 클라이언트에서 요청한 JSON데이터를 프록시 서버에서 가져가 cors문제를 해결하는 방법이다.(저도 이 방법을 사용했습니다.)

저는 http서버에서 데이터를 받아와야 하지만 cors로 막혀 중간에 https서버를 두고 php curl을 사용해 서버측의 데이터를 프록시 서버로 가져왔습니다.

<?php //http://alraram.cafe24.com/api/contry_data.asp header('Content-Type: text/html; charset=UTF-8'); header('Access-Control-Allow-Origin: *'); header('Access-Control-Max-Age: 86400'); header('Access-Control-Allow-Headers: x-requested-with'); header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS'); $url = "서버 url"; $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_FOLLOWLOCATION, true); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($curl, CURLOPT_SSLVERSION, 3); curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 10); curl_setopt($curl, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13'); $str = curl_exec($curl); //$page = utf8_decode(curl_exec($ch)); echo iconv("EUC-KR", "UTF-8", $str); curl_close($curl); ?>

이 코드를 프록시 서버에 넣어서 해결하게 되었다.

이 외에서 프론트에서 javascript를 사용하는 방법 등 이 있지만 그 방법들은 사용해 보니 어려워서 프록시 서버를 택했다.

 

 

volly로 안드로이드 앱을 만들 때는 설정에서 http를 열어 바로 테스트가 가능 했고, 웹에서도 테스트 말고 실제로 해보니 테스트와는 다른 점도 많다는 것을 알게된 오류였다.