1. 程式人生 > >Laravel(在前後端分離時)的api(post請求)如何驗證X-CSRF-TOKEN

Laravel(在前後端分離時)的api(post請求)如何驗證X-CSRF-TOKEN

寫api時本身就不需要驗證csrf,因為已經前後端分離或者app與後端分離的,拿不到CSRF-TOKEN。

設定一組並不需要 CSRF 保護的 URI。例如,如果你正在使用 Stripe 處理付款並使用了他們的 webhook 系統,你會需要將 Stripe webhook 處理的路由排除在 CSRF 保護外,因為 Stripe 並不知道傳送給你路由的 CSRF 令牌是什麼。

這樣,為了避免本不需要的CSRF驗證,就需要執行laravel的CSRF驗證白名單

具體舉例如下:

1. 設定一個Route

Route::post('post', "[email protected]
");

2. 在控制器裡面設定接受引數函式

自己隨便建一個控制器,比如Controller.php

namespace App\Http\Controllers;

use Illuminate\Foundation\Bus\DispatchesJobs;
use Illuminate\Routing\Controller as BaseController;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Support\Facades\DB;
use Illuminate\Http\Request; class Controller extends BaseController { use AuthorizesRequests, DispatchesJobs, ValidatesRequests; public function post(Request $request){ $user = $request->input("user"); $name = $request->input("name"); $msg = "post yes"; $back = [ "state"=>1, "msg"=>$msg, "name"=>$name, "user"=>$user, ]; return json_encode($back, JSON_UNESCAPED_UNICODE); }

}

3. 設定排除CSRF排除白名單

VerifyCsrfToken.php 中填寫post介面名稱

4. 前臺post請求

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title>載入中..</title>
</head>
<body>

<p></p>

<script>

    (function () { // 登入狀態自檢

        // 請求資料
        $.ajax({
            url: "http://localhost/laravel55/public/index.php/post",
            type: "POST",
            dataType: "json",
            async: true,
            data: { // 字典資料
                user: 110,
                name: "張三",
            },
            success: function(data, status){

                if(typeof data === "string"){
                    console.log("post返回資料:" + data+";status:"+status+";返回資料的型別:"+typeof data);
                    datas = JSON.parse(data);
                }else {
                    console.log("post返回資料:" + JSON.stringify(data)+";status:"+status+";返回資料的型別:"+typeof data);
                    datas = data;
                }

                if (datas.state===0){
                    console.log("post請求被拒絕");

                }else if (datas.state===1) {
                    console.log("post請求成功");
                    console.log(datas.msg);
                    $("p").html(datas.msg);
                }
            },
            error: function (xhr) {
                console.log(xhr);
            }
        });
    })();

</script>

</body>
</html>

如圖,post請求成功。

-