안녕하세요 프로젝트를 react와 연동하기에 대해서 여쭈고 싶습니다 :)

안녕하세요! 이해를 돕기 위해 프로젝트에서 사용한 프레임워크를 배제하고 이야기하겠습니다. Cors 가 궁금하시군요. 상황을 재현해보도록 합시다. 아래의 예시를 기반으로 프레임워크에서 프로젝트에서 어떻게 적용하면 좋을지 고민해보시기 바랍니다. 먼저 backend, frontend 에 index.php, index.html 을 만들어주고 아래와 같이 작성합니다. 프론트엔드에서 어떤 프레임워크가 사용되었는지는 중요하지 않습니다. 

* Cors 는 서브도메인, 도메인, 포트 등이 다르지 않은 경우에는 브라우저에서 제한하지 않을 것입니다. api.example.com 과 example.com 은 서브도메인이 다르기때문에 Cors 문제가 발생합니다.

backend/index.php

POST 요청에 대해 ajax 로 넘어온 파라매터를 받아온 다음 다시 그대로 반환합니다. 

switch ($_SERVER['REQUEST_METHOD']) {
    case 'POST':
        $data = file_get_contents('php://input');
        echo $data;
}

frontend/index.html

axios 를 사용하여 post 요청을 던져봅시다. 기본적으로 Content-Type: application/json 입니다.

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    axios.post('http://localhost:8080', { 
        data: 'Hello, world' // Content-Type: application/json
    }).then(({ data }) => {
        console.log(data);
    })
</script>

그 다음, 프론트와 백엔드에 대해 다른 서버를 켭니다. 서로 포트가 다름에 유의하십시오.

$ php -S localhost:8080 -t backend
$ php -S localhost:8081 -t frontend

Access-Control-Allow-Origin

프론트엔드인 localhost:8081 에 진입하여 콘솔을 살펴보면 Cors 오류를 던집니다.

Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

에러를 보니 Access-Control-Allow-Origin 를 설정하라는 이야기인 것 같습니다. 요청을 허용할 Origin 을 설정하라는 이야기입니다. 설정해봅시다.

backend/index.php

header("Access-Control-Allow-Origin: http://localhost:8081");
// header("Access-Control-Allow-Origin: *");

Access-Control-Allow-Headers

하지만 다시한번 요청해보면 또 에러를 던집니다. 이번에는 Access-Control-Allow-Headers 를 설정하지 않아서 생긴 오류입니다.

Access to XMLHttpRequest at 'http://localhost:8080/' from origin 'http://localhost:8081' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

문구를 읽어보면 이런 표현이 있습니다. 

Request header field content-type is not allowed

content-type 헤더가 서버에서 허용되지 않았다는 이야기입니다. axios 요청을 까보면 기본적으로 content-type 을 같이 던집니다. 

Access-Control-Request-Headers: content-type

서버에 Access-Control-Allow-Headers 를 응답에 추가합니다.

backend/index.php

header("Access-Control-Allow-Headers: content-type");
// header("Access-Control-Allow-Headers: *");

이제 최종적으로 서버의 코드를 살펴보면 다음과 같습니다.

backend/index.php

header("Access-Control-Allow-Origin: http://localhost:8081");
header("Access-Control-Allow-Headers: content-type");

switch ($_SERVER['REQUEST_METHOD']) {
    case 'POST':
        $data = file_get_contents('php://input');
        echo $data;
}

이제 다시 요청을 해보면 오류없이 데이터가 콘솔에 출력된 것을 볼 수 있을겁니다. 라라벨은 내부적으로 처리해주는 일이 있어서 그럴 것이고, 우리는 사실상 날것 그대로를 이야기하고 있으므로 설정해주어야 하는 것들이 있답니다.

도움이 되셨으면 좋겠습니다 :)