angular - CSRF 令牌不匹配 Laravel sanctum 和 Angular http
问题描述
我一直在尝试实现 Laravel sanctum,但是即使我遵循了 Laravel Sanctum 文档中所说的所有内容,我仍然遇到此错误“CSRF 令牌不匹配”
cors.php
配置文件
'paths' => [
'api/*',
'login',
'logout',
'sanctum/csrf-cookie'
],
'supports_credentials' => true,
内核是根据文档添加的,因此在此处添加代码不会浪费空间
.env
文件
SESSION_DRIVER=cookie
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost
我在这里使用 Angular 9 作为我的前端
这是我的拦截器
request = request.clone({
withCredentials: true
})
这就是我向 Laravel 发送请求的方式
this.http.get<any>(url('sanctum/csrf-cookie')).subscribe(() => {
this.http.post<any>(url('login'), { this.username, this.password })
.subscribe(success => console.log(success), error => console.log(error))
})
命中第一条路线后,我可以确认 cookie 的创建,但问题在于第二条路线('/login')
解决方案
您需要在标头中发送x-csrf-token,(Angular 仅在相对 URL 中自动包含它,而不是绝对 URL)
您可以创建一个解释器来执行此操作,这样的事情应该可以工作:
import {Injectable} from '@angular/core';
import {
HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpXsrfTokenExtractor
} from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class HttpXsrfInterceptor implements HttpInterceptor {
headerName = 'X-XSRF-TOKEN';
constructor(private tokenService: HttpXsrfTokenExtractor) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.method === 'GET' || req.method === 'HEAD') {
return next.handle(req);
}
const token = this.tokenService.getToken();
// Be careful not to overwrite an existing header of the same name.
if (token !== null && !req.headers.has(this.headerName)) {
req = req.clone({headers: req.headers.set(this.headerName, token)});
}
return next.handle(req);
}
}
推荐阅读
- python - Django:在“form.is_valid”之前切片表单数据
- c# - 安装向导安装的隐藏文件
- colors - 将 DisplayColor 从 TrackExtension 中取出并放入 MultiLineString.Style.Stroke.color 的正确方法是什么?
- web-scraping - 抓取下一页,没有任何意义的结果
- scala - 如何针对多个版本的 SBT 插件构建代码库?
- r - 在 R 中自动创建和使用自定义函数
- javascript - React:为什么直到第二次才正确更新状态?
- php - 如何在所见即所得编辑器/描述中通过 REST API 将图像添加到 Magento 2 产品?
- android - useLibrary 'android.test.base' 用于android测试的目的是什么
- reactjs - 使用 next react redux 包装器设置初始状态