javascript - Laravel PUT 响应错误 419。令牌被添加到标题中。我仍然没有结果
问题描述
我正在尝试使用 Fetch API 和 Laravel (5.5/5.6) 来放置一些正文(数据或文件)。我收到错误 419(未知状态),同时我将 CSRF 令牌添加到标头中(因为我需要它)。在我的示例中,我将范围最小化,以便于查找原因。
提取时出现问题(我没有得到任何结果:所以result.ok
不行)。
我看到很多人因为令牌而遇到同样的问题。但在我的示例中,我确实使用了令牌,但在获取方面仍然存在问题。我的代码有什么问题?
路线 (routes\web.php)
<?php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
Route::get('/test', function () {
return view('test');
});
Route::put('/test/put', function (Request $request) {
// PUT some stuff
return response()->json([
'feedback' => 'test result is ok!'
]);
})->name('test.put');
刀片(资源\视图\test.blade.php)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Test</title>
</head>
<body>
<form id="test-form" method="post" action="{{ route('test.put') }}">
<input type="text" name="test" value="123" title="Test">
<button type="submit">Put</button>
</form>
<script>
(function () {
function getToken() {
let metas = document.getElementsByTagName("meta");
for (let i = 0; i < metas.length; i++) {
let meta = metas[i];
if (meta.name === "csrf-token") {
return meta.content;
}
}
}
function buildOptions(form) {
let formData = new FormData();
let testVal = form.querySelector('input[name="test"]').value;
formData.append("test", testVal);
let token = getToken();
let headers = new Headers({
'X-CSRF-TOKEN': token
});
return {
method: 'PUT',
body: formData,
headers
};
}
function putIt(form) {
let url = form.getAttribute('action');
let options = buildOptions(form);
fetch(url, options)
.then(response => {
if (response.ok) {
return response
}
throw new Error("Response is not ok");
})
.then(response => response.json())
.then(console.log)
.catch(err => console.error("Something went wrong", err))
}
document.getElementById('test-form').addEventListener('submit', function(e) {
e.preventDefault();
putIt(this);
});
})();
</script>
</body>
</html>
解决方案
您所要做的就是将您的 api 路由从 web.php 文件移动到 api.php 文件,因为 laravel 为每个文件使用不同的中间件 https://laravel.com/docs/4.2/routing#basic-routing
推荐阅读
- c - 如何使我的代码独立于“RTOS”?
- wordpress - 用于 Wordpress 的 Gutenburg 组件的标准编辑器样式
- phpmyadmin - 无法连接到远程数据库
- flutter - 每次加载应用程序时,如何防止 Firestore 加载整个用户数据
- c++ - 无法使用 Visual Studio 2010 和 Qt 版本 4.8.0 创建“Qt Gui 应用程序”
- javafx - 如何将对象传递给不同控制器中的 ArrayList(java FX)
- java - Java:为多个线程使用同一个对象的最佳方式是什么?
- python - python中的cv::UMat::convertTo
- javascript - 将每个标签围绕具有两行或多行的开关居中
- python - 在 Pathlib 中转换路径时遇到问题