Laravel API 구성

API 구성에 필요한 것.

1. 클라이언트에서 API 콜 할때 헤더 세팅들.

2. 서버에서 Request 처리할때 CORS 등 세팅들.

GET 테스트 =========================

1. 클라이언트 세팅

//javascript

<script>

var api_host = "http://api.domain.co.kr/api/v1/lists";

$("#btn_test").on('click',function(){

        $.ajax({

            type: 'get',

            url: api_host,

            contentType: "application/x-www-form-urlencoded; charset=UTF-8",

            data : {

                name:'myname'

            },

            dataType: 'json',

            success: function(data){

                console.log(data);

            },

            error:function(request,status,error){     console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);

            }

        });

)};

</script>

2. 서버세팅

//php 파일

//API를 요청하는 클라이언트 URL 을 적어준다. ( * 로 적으면 모두 허용)

header('Access-Control-Allow-Origin: http://client.domain.co.kr');

POST 테스트 ===========================

POST에는 CSRF 토큰을 헤더에 넣어 함께 전송해야 함.

본격적인 POST 전송 전에 OPTIONS Method로 Preflight를 날린다.

그래서 라라벨 라우터 내 web.php 또는 api.php 에서 Route::options 를 꼭 열여줘야 함.

1. 클라이언트 세팅

//HTML 파일

<meta name="csrf-token" content="{{ csrf_token() }}">

//javascript

<script>

var api_host = "http://api.domain.co.kr/api/v1/lists";

$("#btn_test").on('click',function(){

        $.ajax({

            type: 'post',

            url: api_host,

            contentType: "application/x-www-form-urlencoded; charset=UTF-8",

            //contentType: "multipart/form-data",

            headers: {

                'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')

            },

            data : {

                name:'myname'

            },

            dataType: 'json',

            success: function(data){

                console.log(data);

            },

            error:function(request,status,error){     console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);

            }

        });

)};

</script>

2. 서버세팅

//php 파일

//API를 요청하는 클라이언트 URL 을 적어준다. ( * 로 적으면 모두 허용)

header('Access-Control-Allow-Origin: http://client.domain.co.kr');

header('Access-Control-Allow-Headers: x-ncp-apigw-api-key,x-csrf-token');

// app/Http/Middleware/VerifyCsrfToken.php 파일

// $except 에 실제 호출하는 API URI를 적어야 함 (Origin 서버 주소를 적는게 아님)

protected $except = [

        '/api/*',

        'http://api.domain.co.kr/v1/*'

 ];

//번외로 위 VerifyCsrfToken.php 를 거치지 않고 POST 요청을 허용하려면 설정을 변경해주면 됨

// app/Http/Kernel.php 파일에서

protected $middlewareGroups = [

        'web' => [

            \App\Http\Middleware\EncryptCookies::class,

            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,

            \Illuminate\Session\Middleware\StartSession::class,

            // \Illuminate\Session\Middleware\AuthenticateSession::class,

            \Illuminate\View\Middleware\ShareErrorsFromSession::class,

            //\App\Http\Middleware\VerifyCsrfToken::class,

            \Illuminate\Routing\Middleware\SubstituteBindings::class,

            \App\Http\Middleware\RequiredDF::class,

            \App\Http\Middleware\ExceptAppendableVerifyCsrfToken::class,

            \App\Http\Middleware\LangPreprocessor::class,

            \App\Http\Middleware\Purifying::class,

            \App\Http\Middleware\FreezeSEO::class,

        ],

// 위 처럼 VerifyCsrfToken::class 를 사용안함으로 주석처리하면 됨

Cookie 테스트 ===================================

1. 클라이언트 세팅

//평상시는 사용안하지만 쿠키를 넘기거나 할때는 xhrFields 를 설정해줘야 한다.

//ajax 호출시

xhrFields: {

                withCredentials: true

            },

//위 코드를 삽입해서 호출해야 함

//위 withCredentials 옵션을 적용하면, 서버에서 CORS header 세팅할때 * 옵션을 사용하지 못한다. 사용하면 에러남.

2. 서버세팅

//클라이언트에서 xhrFields 를 설정해서 보낼경우에는 서버에서 꼭 Credentials 를 설정해줘야 한다.

header('Access-Control-Allow-Origin: http://client.domain.co.kr');

header('Access-Control-Allow-Headers: x-ncp-apigw-api-key,x-csrf-token');

header('Access-Control-Allow-Credentials: true');

//위 처럼 Credentials를 사용할 때는 Access-Control-Allow-Origin 을 * 으로 설정하면 *으로 설정하지말라는 오류메시지를 뱉는다.

//위 두개 설정만 추가해주면 헤더에 따로 쿠키를 추가해주는 작업을 하지 않아도 Cookie 가 자동으로 헤더에 넣어져서 넘어간다.