{"id":1095,"date":"2024-03-16T18:31:00","date_gmt":"2024-03-16T09:31:00","guid":{"rendered":"https:\/\/shinke1987.net\/?p=1095"},"modified":"2024-03-16T18:32:19","modified_gmt":"2024-03-16T09:32:19","slug":"laravel%e3%81%a7%e3%81%aeapi%e3%81%ae%e6%8c%99%e5%8b%95%e3%82%92%e7%a2%ba%e8%aa%8d%ef%bc%88%e3%83%88%e3%83%bc%e3%82%af%e3%83%b3%e8%aa%8d%e8%a8%bc%e4%bb%a5%e5%a4%96%ef%bc%89","status":"publish","type":"post","link":"https:\/\/shinke1987.net\/?p=1095","title":{"rendered":"Laravel\u3067\u306eAPI\u306e\u6319\u52d5\u3092\u78ba\u8a8d\uff08\u30c8\u30fc\u30af\u30f3\u8a8d\u8a3c\u4ee5\u5916\uff09"},"content":{"rendered":"\n

\u74b0\u5883<\/h2>\n\n\n\n

Laravel10\u306eLaravel Sail<\/p>\n\n\n\n

routes\/web.php\u3067\u8a2d\u5b9a\u3057\u305f\u3001auth\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u9069\u7528\u3057\u3066\u3044\u306a\u3044API<\/h2>\n\n\n\n

routes\/web.php<\/h3>\n\n\n
\nRoute::post('\/ping', function() {\n    return response()->json(['message' => 'pong']);\n});\n<\/pre><\/div>\n\n\n
HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u306b\u30c8\u30fc\u30af\u30f3\u3092\u542b\u3081\u306a\u304b\u3063\u305f\u5834\u5408<\/h3>\n\n\n\n
http:\/\/localhost<\/a> \u3078\u30a2\u30af\u30bb\u30b9\u3057Chrome\u306e\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u304b\u3089\u6b21\u306eJS\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3002<\/p>\n\n\n
\nresponsePing = await fetch('http:\/\/localhost\/ping', { method: 'POST' });\n<\/pre><\/div>\n\n\n
\u7d50\u679c\u3068\u3057\u3066\u3001HTTP\u30ec\u30b9\u30dd\u30f3\u30b9\u30b9\u30c6\u30fc\u30bf\u30b9\u30b3\u30fc\u30c9419\u304c\u8fd4\u3063\u3066\u304d\u3066\u3001CSRF\u95a2\u9023\u306e\u30a8\u30e9\u30fc\u3068\u306a\u308b\u3002<\/p>\n\n\n\n
HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u306bX-XSRF-TOKEN \u3092\u542b\u3081\u305f\u5834\u5408<\/h3>\n\n\n\n
http:\/\/localhost<\/a> \u3078\u30a2\u30af\u30bb\u30b9\u3057Chrome\u306e\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u304b\u3089\u6b21\u306eJS\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3002<\/p>\n\n\n
\n\/\/ XSRF-TOKEN\u306e\u5024\u3092\u53d6\u5f97\u3002\nvar re = new RegExp('^XSRF-TOKEN=');\nvar xsrfToken = document.cookie.replace(re, '');\nxsrfToken = decodeURIComponent(xsrfToken);\n\n\/\/ HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30d8\u30c3\u30c0\u306bX-XSRF-TOKEN\u3092\u8a2d\u5b9a\u3002\nvar headers = new Headers();\nheaders.set('X-XSRF-TOKEN', xsrfToken);\n\n\/\/ fetch\u30e1\u30bd\u30c3\u30c9\u306e\u5f15\u6570\u307e\u3068\u3081\u3002\nvar paramsPing = {\n    method: 'POST',\n    headers\n};\n\nvar responsePing = await fetch('http:\/\/localhost\/ping', paramsPing);\n<\/pre><\/div>\n\n\n
\u7d50\u679c\u3068\u3057\u3066\u3001{“message”: “pong”} \u3068\u3044\u3046JSON\u304c\u8fd4\u3063\u3066\u304f\u308b\u3002<\/p>\n\n\n\n
HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u306bX-CSRF-TOKEN \u3092\u542b\u3081\u305f\u5834\u5408<\/h3>\n\n\n\n
HTML\u306e\u30d8\u30c3\u30c0\u5185\u306bcsrf-token\u306e\u5024\u3092\u4fdd\u6301\u3059\u308bmeta\u30bf\u30b0\u304c\u3042\u308b\u30da\u30fc\u30b8\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3001
Chrome\u306e\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u304b\u3089\u6b21\u306eJS\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3002<\/p>\n\n\n
\n\/\/ CSRF-TOKEN\u306e\u5024\u3092\u53d6\u5f97\u3002\nvar csrfToken = document.head.querySelector('[name="csrf-token"]').content;\n\n\/\/ HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30d8\u30c3\u30c0\u306bX-CSRF-TOKEN\u3092\u8a2d\u5b9a\u3002\nvar headers = new Headers();\nheaders.set('X-CSRF-TOKEN', csrfToken);\n\n\/\/ fetch\u30e1\u30bd\u30c3\u30c9\u306e\u5f15\u6570\u307e\u3068\u3081\u3002\nvar paramsPing = {\n    method: 'POST',\n    headers\n};\n\nvar responsePing = await fetch('http:\/\/localhost\/ping', paramsPing);\nvar resultJson = await responsePing.json();\n<\/pre><\/div>\n\n\n
\u7d50\u679c\u3068\u3057\u3066\u3001{“message”: “pong”} \u3068\u3044\u3046JSON\u304c\u8fd4\u3063\u3066\u304f\u308b\u3002<\/p>\n\n\n\n
routes\/web.php \u3067\u8a2d\u5b9a\u3057\u305f\u3001auth\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u9069\u7528\u3057\u305fAPI<\/h2>\n\n\n\n
routes\/web.php<\/h3>\n\n\n
\nRoute::middleware('auth')->post('\/ping', function() {\n    return response()->json(['message' => 'pong']);\n});\n<\/pre><\/div>\n\n\n
\u30d5\u30ed\u30f3\u30c8\u30fb\u753b\u9762\u304b\u3089\u30ed\u30b0\u30a4\u30f3\u5f8c\u3001HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u306b\u30c8\u30fc\u30af\u30f3\u3092\u542b\u3081\u306a\u304b\u3063\u305f\u5834\u5408<\/h3>\n\n\n\n
Chrome\u306e\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u304b\u3089\u6b21\u306eJS\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3002<\/p>\n\n\n
\nresponsePing = await fetch('http:\/\/localhost\/ping', { method: 'POST' });\n<\/pre><\/div>\n\n\n
\u7d50\u679c\u3068\u3057\u3066\u3001HTTP\u30ec\u30b9\u30dd\u30f3\u30b9\u30b9\u30c6\u30fc\u30bf\u30b9\u30b3\u30fc\u30c9419\u304c\u8fd4\u3063\u3066\u304d\u3066\u3001CSRF\u95a2\u9023\u306e\u30a8\u30e9\u30fc\u3068\u306a\u308b\u3002<\/p>\n\n\n\n
\u30d5\u30ed\u30f3\u30c8\u30fb\u753b\u9762\u304b\u3089\u30ed\u30b0\u30a4\u30f3\u5f8c\u3001HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u306bX-XSRF-TOKEN \u3092\u542b\u3081\u305f\u5834\u5408<\/h3>\n\n\n\n
Chrome\u306e\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u304b\u3089\u6b21\u306eJS\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3002<\/p>\n\n\n
\n\/\/ XSRF-TOKEN\u306e\u5024\u3092\u53d6\u5f97\u3002\nvar re = new RegExp('^XSRF-TOKEN=');\nvar xsrfToken = document.cookie.replace(re, '');\nxsrfToken = decodeURIComponent(xsrfToken);\n\n\/\/ HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30d8\u30c3\u30c0\u306bX-XSRF-TOKEN\u3092\u8a2d\u5b9a\u3002\nvar headers = new Headers();\nheaders.set('X-XSRF-TOKEN', xsrfToken);\n\n\/\/ fetch\u30e1\u30bd\u30c3\u30c9\u306e\u5f15\u6570\u307e\u3068\u3081\u3002\nvar paramsPing = {\n    method: 'POST',\n    headers\n};\n\nvar responsePing = await fetch('http:\/\/localhost\/ping', paramsPing);\n<\/pre><\/div>\n\n\n
\u7d50\u679c\u3068\u3057\u3066\u3001{“message”: “pong”} \u3068\u3044\u3046JSON\u304c\u8fd4\u3063\u3066\u304f\u308b\u3002<\/p>\n\n\n\n
\u30d5\u30ed\u30f3\u30c8\u30fb\u753b\u9762\u304b\u3089\u30ed\u30b0\u30a4\u30f3\u5f8c\u3001HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u306bX-CSRF-TOKEN \u3092\u542b\u3081\u305f\u5834\u5408<\/h3>\n\n\n\n
HTML\u306e\u30d8\u30c3\u30c0\u5185\u306bcsrf-token\u306e\u5024\u3092\u4fdd\u6301\u3059\u308bmeta\u30bf\u30b0\u304c\u3042\u308b\u30da\u30fc\u30b8\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3001
Chrome\u306e\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u304b\u3089\u6b21\u306eJS\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3002<\/p>\n\n\n
\n\/\/ CSRF-TOKEN\u306e\u5024\u3092\u53d6\u5f97\u3002\nvar csrfToken = document.head.querySelector('[name="csrf-token"]').content;\n\n\/\/ HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30d8\u30c3\u30c0\u306bX-CSRF-TOKEN\u3092\u8a2d\u5b9a\u3002\nvar headers = new Headers();\nheaders.set('X-CSRF-TOKEN', csrfToken);\n\n\/\/ fetch\u30e1\u30bd\u30c3\u30c9\u306e\u5f15\u6570\u307e\u3068\u3081\u3002\nvar paramsPing = {\n    method: 'POST',\n    headers\n};\n\nvar responsePing = await fetch('http:\/\/localhost\/ping', paramsPing);\nvar resultJson = await responsePing.json();\n<\/pre><\/div>\n\n\n
\u7d50\u679c\u3068\u3057\u3066\u3001{“message”: “pong”} \u3068\u3044\u3046JSON\u304c\u8fd4\u3063\u3066\u304f\u308b\u3002<\/p>\n\n\n\n
\u975e\u30ed\u30b0\u30a4\u30f3\u72b6\u614b\u3067\u3001HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u306bX-CSRF-TOKEN \u3092\u542b\u3081\u305f\u5834\u5408<\/h3>\n\n\n\n
HTML\u306e\u30d8\u30c3\u30c0\u5185\u306bcsrf-token\u306e\u5024\u3092\u4fdd\u6301\u3059\u308bmeta\u30bf\u30b0\u304c\u3042\u308b\u30da\u30fc\u30b8\u306b\u30a2\u30af\u30bb\u30b9\u3057\u3001
Chrome\u306e\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u304b\u3089\u6b21\u306eJS\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3002<\/p>\n\n\n
\n\/\/ CSRF-TOKEN\u306e\u5024\u3092\u53d6\u5f97\u3002\nvar csrfToken = document.head.querySelector('[name="csrf-token"]').content;\n\n\/\/ HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u306e\u30d8\u30c3\u30c0\u306bX-CSRF-TOKEN\u3092\u8a2d\u5b9a\u3002\nvar headers = new Headers();\nheaders.set('X-CSRF-TOKEN', csrfToken);\n\n\/\/ fetch\u30e1\u30bd\u30c3\u30c9\u306e\u5f15\u6570\u307e\u3068\u3081\u3002\nvar paramsPing = {\n    method: 'POST',\n    headers\n};\n\nvar responsePing = await fetch('http:\/\/localhost\/ping', paramsPing);\nvar resultJson = await responsePing.json();\n<\/pre><\/div>\n\n\n
\u7d50\u679c\u3068\u3057\u3066\u3001HTTP\u30ec\u30b9\u30dd\u30f3\u30b9\u30b9\u30c6\u30fc\u30bf\u30b9\u30b3\u30fc\u30c9302\u304c\u8fd4\u3063\u3066\u304d\u3066\u3001\u30ed\u30b0\u30a4\u30f3\u753b\u9762\u3078\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3055\u308c\u308b\u3002<\/p>\n\n\n\n
routes\/api.php \u3067\u8a2d\u5b9a\u3057\u305fAPI\uff08Sanctum\u306eSPA\u8a8d\u8a3c\uff09<\/h2>\n\n\n\n
routes\/api.php<\/h3>\n\n\n
\n\/\/ \u30ed\u30b0\u30a4\u30f3\u51e6\u7406\u3002\n\/\/ email=name1@aa.com\n\/\/ password=password\n\/\/ \u3067\u30ed\u30b0\u30a4\u30f3\u3067\u304d\u308b\u30a2\u30ab\u30a6\u30f3\u30c8\u304c\u3042\u308b\u3053\u3068\u3092\u524d\u63d0\u3068\u3059\u308b\u3002\nRoute::post('\/login', function(Request $request) {\n    if (\\Illuminate\\Support\\Facades\\Auth::attempt($request->all())) {\n        return response()->json(['result' => 'correct']);\n    }\n\n    return response()->json(['result' => 'incorrect']);\n});\n\n\/\/ \u30ed\u30b0\u30a4\u30f3\u6e08\u307f\u3067\u306a\u3044\u3068JSON\u3092\u53d6\u5f97\u3067\u304d\u306a\u3044\u3002\nRoute::middleware('auth:sanctum')->post('\/ping', function() {\n    return response()->json(['message' => 'pong']);\n});\n<\/pre><\/div>\n\n\n
JS\u30b3\u30fc\u30c9<\/h3>\n\n\n\n
http:\/\/localhost<\/a> \u3078\u30a2\u30af\u30bb\u30b9\u3057Chrome\u306e\u30c7\u30d9\u30ed\u30c3\u30d1\u30fc\u30c4\u30fc\u30eb\u304b\u3089\u6b21\u306eJS\u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3002<\/p>\n\n\n
\n\/\/ CSRF\u4fdd\u8b77\u521d\u671f\u5316\u3002\nvar headers = new Headers();\nheaders.set('Accept', 'application\/json');\nheaders.set('Origin', 'http:\/\/localhost');\n\nvar paramsGet = {\n    method: 'GET',\n    headers\n};\n\nvar responseCsrf = await fetch('http:\/\/localhost\/sanctum\/csrf-cookie', paramsGet);\n\n\/\/ loginAPI\u3092\u30b3\u30fc\u30eb\u3002\n\/\/ \u53d6\u5f97\u3057\u305fXSRF-TOKEN\u3092HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u3078\u8ffd\u52a0\u3002\nvar re = new RegExp('^XSRF-TOKEN=');\nvar xsrfToken = document.cookie.replace(re, '');\nxsrfToken = decodeURIComponent(xsrfToken);\n\nheaders.set('X-XSRF-TOKEN', xsrfToken);\n\n\/\/ \u30ed\u30b0\u30a4\u30f3\u7528\u30d1\u30b9\u30d1\u30e9\u30e1\u30fc\u30bf\u306e\u8a2d\u5b9a\u3002\nvar formData = new FormData();\nformData.append('email', 'name1@aa.com');\nformData.append('password', 'password');\n\nvar paramsPostData = {\n    method: 'POST',\n    headers,\n    body: formData\n};\n\nvar responseLogin = await fetch('http:\/\/localhost\/api\/login', paramsPostData);\n\n\/\/ pingAPI\u3092\u30b3\u30fc\u30eb\nvar xsrfToken = document.cookie.replace(re, '');\nxsrfToken = decodeURIComponent(xsrfToken);\n\nheaders.set('X-XSRF-TOKEN', xsrfToken);\n\nvar paramsPost = {\n    method: 'POST',\n    headers\n};\n\nvar responsePing = await fetch('http:\/\/localhost\/api\/ping', paramsPost);\nvar resultJson = await responsePing.json();\n<\/pre><\/div>\n\n\n
\u7d50\u679c\u3068\u3057\u3066\u3001{“message”: “pong”} \u3068\u3044\u3046JSON\u304c\u8fd4\u3063\u3066\u304f\u308b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u74b0\u5883 Laravel10\u306eLaravel Sail routes\/web.php\u3067\u8a2d\u5b9a\u3057\u305f\u3001auth\u30df\u30c9\u30eb\u30a6\u30a7\u30a2\u3092\u9069\u7528\u3057\u3066\u3044\u306a\u3044API routes\/web.php HTTP\u30ea\u30af\u30a8\u30b9\u30c8\u30d8\u30c3\u30c0\u306b\u30c8\u30fc\u30af\u30f3\u3092\u542b\u3081\u306a\u304b\u3063\u305f\u5834\u5408  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[96],"tags":[88,81],"class_list":["post-1095","post","type-post","status-publish","format-standard","hentry","category-laravel","tag-laravel","tag-php"],"_links":{"self":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1095"}],"version-history":[{"count":3,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1095\/revisions"}],"predecessor-version":[{"id":1098,"href":"https:\/\/shinke1987.net\/index.php?rest_route=\/wp\/v2\/posts\/1095\/revisions\/1098"}],"wp:attachment":[{"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shinke1987.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}