ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [PHP] Ajax 크로스도메인(CORS) 이슈 해결
    Web App/PHP 2019. 10. 11. 13:39

    Ajax 통신으로 공유하기 버튼을 클릭한 횟수와 공유한 게시글을 통해 유입된 인구수를 조사하기 위해 각각의 php파일을 만들고 서버와 통신을 시도했는데, 아래와 같은 오류를 내보냈다.

    Access to XMLHttpRequest at 'https://url/ajax.php' from origin 'https://this\_url/' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    로컬에서 테스트했을 때는 같은 url상의 경로이기 때문에 당연하게 되었던 것이,

    실제 경로에 스크립트 삽입 후 url이 바뀌었기 때문에 CORS정책에 의해 막힌다는 것.

    사실상 유명무실한 정책인 것 같지만.. 그래도 어쩌겠는가..

    방법은 클라이언트 사이드에서 확장도구를 사용하는 방법과, 서버 사이드에서 접근을 허용해주는 방법이 있다.

    서버와 웹페이지가 같은 서버경로상에 있다면 굳이 필요 없겠지만 내 경우 여러곳에 배포할 목적으로 사용하는 것이기 때문에 서버 사이드에서 해결해 주도록 한다.

    방법은 상당히 심플한데, 헤더에

    Access-Control-Allow-Origin: \*
    Access-Control-Max-Age: 86400
    Access-Control-Allow-Headers: x-requested-with

    요것들만 추가해주면 된다는 것..
    하지만 저렇게만 하면 GET/POST 메소드 이외에는 사용이 안되기 때문에 다른 메서드를 사용하기 위해 하나 더 추가해준다.

    Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS

    최종적으로 PHP 코드는 이렇게 된다

    1
    2
    3
    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');

    아래에 잘 설명되어있는 글이 있으니 더 알아보고싶다면 참고하도록 하자.

    https://brunch.co.kr/@adrenalinee31/1

    'Web App > PHP' 카테고리의 다른 글

    [PHP] Ajax 크로스도메인(CORS) 이슈 해결  (0) 2019.10.11

    댓글 0

Designed by Tistory.