blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

프론트엔드에서 XHR 로 백엔드에 데이터를 요청하려고 했으나, 다음과 같은에러가 뜨면서 실행이 안된다.

CORS 정책이라고 해서 보안상의 이유로 다른 도메인에 ajax 요청을 보내지 못하게 하는 거라고 나온다.

CORS 란, 동일한 도메인에서만 해당 도메인에 요청을 보낼수 있는것이라고 나온다.

 

해결방법은 여러가지가 있는데, 서버에서 Access-Control-Allow-Origin 설정을 통한 요청을 허용하는 방식을 사용했다.

서버에서 Access-Control-allow-origin 설정을 통한 요청 허용

• apache

  • httpd.conf에서 mod_headers.c 쪽에 설정을 넣어주면 됩니다.

  • 또는 VirualHost 부분에 넣어도 됩니다.

    <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule>

출처 : https://velog.io/@jmkim87/%EC%A7%80%EA%B8%8B%EC%A7%80%EA%B8%8B%ED%95%9C-CORS-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90

 

백엔드 서버의 header 에 Access-Control-Allow-Origin 을 추가하니 실행이 되는 것을 확인할 수 있었다.

 

참고 사이트>>>

https://velog.io/@jmkim87/%EC%A7%80%EA%B8%8B%EC%A7%80%EA%B8%8B%ED%95%9C-CORS-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90

http://www.ajax-cross-origin.com/how.html