带HttpClient的Laravel Sanctum/Angular 2 xsrf cookie

我正在尝试使用Angular 2的Laravel（后端）中的服务。如果使用

axios

，我可以毫无问题地完成，但我需要使用

HttpClient

如何翻译此代码：

const url = `${this.endPoint}/login`;
const urlCsrf = `${this.endPoint}/csrf-cookie`;
const body = { email, password };

axios.defaults.withCredentials = true;

axios.get(urlCsrf).then(() => {
    axios.post(url, body).then((resp) => {
        console.log(resp);
    });
});

对于这样但有效的东西：

//this code dont work returns csrf error
this.http.get(urlCsrf).subscribe(() => {
     this.http.post(url, body).subscribe((resp) => {
         console.log(resp);
    });
});

---

我最近也遇到了同样的问题，以下是对我有效的方法：

$data='client\u id=xxxxxxxxx&client\u secret=xxxxxxxxx&grant\u type=client\u credentials'；
$url=”https://xxxxxxxxxxxxxxxxxxxxx.x/xx/xxxxx";
$ch=curl_init（）；
curl_setopt（$ch，CURLOPT_URL，$URL）；
curl_setopt（$ch，CURLOPT_CONNECTTIMEOUT，5）；
curl_setopt（$ch，CURLOPT_POST，true）；
curl_setopt（$ch，CURLOPT_RETURNTRANSFER，true）；
curl_setopt（$ch，CURLINFO_HEADER_OUT，true）；
curl_setopt（$ch，CURLOPT_POSTFIELDS，$data）；
curl_setopt（$ch，CURLOPT_HTTPHEADER，数组(
'内容类型：application/x-www-form-urlencoded'，
“内容长度：”.strlen（$data））
);
$contents=curl\u exec（$ch）；
if（旋度误差（$ch））{
回波旋度误差（$ch）；
回声“\n
”；
$contents=''；
}否则{
卷曲关闭（$ch）；
}
如果（！is_string（$contents）| |！strlen（$contents））{
echo“无法获取内容。”；
$contents=''；
}
$json=json_encode（$contents）我最近遇到了同样的问题，以下是对我有效的方法：


$data='client\u id=xxxxxxxxx&client\u secret=xxxxxxxxx&grant\u type=client\u credentials'；
$url=”https://xxxxxxxxxxxxxxxxxxxxx.x/xx/xxxxx";
$ch=curl_init（）；
curl_setopt（$ch，CURLOPT_URL，$URL）；
curl_setopt（$ch，CURLOPT_CONNECTTIMEOUT，5）；
curl_setopt（$ch，CURLOPT_POST，true）；
curl_setopt（$ch，CURLOPT_RETURNTRANSFER，true）；
curl_setopt（$ch，CURLINFO_HEADER_OUT，true）；
curl_setopt（$ch，CURLOPT_POSTFIELDS，$data）；
curl_setopt（$ch，CURLOPT_HTTPHEADER，数组(
'内容类型：application/x-www-form-urlencoded'，
“内容长度：”.strlen（$data））
);
$contents=curl\u exec（$ch）；
if（旋度误差（$ch））{
回波旋度误差（$ch）；
回声“\n
”；
$contents=''；
}否则{
卷曲关闭（$ch）；
}
如果（！is_string（$contents）| |！strlen（$contents））{
echo“无法获取内容。”；
$contents=''；
}
$json=json_encode（$contents）该代码转换为：

const body={电子邮件，密码}
this.http.get（urlCsrf）.subscribe（（）=>{
this.http.post（url，body，{withCredentials:true}）.subscribe（（resp）=>{
控制台日志（resp）；
});
});

如果您想以更具反应性的方式编写：

const body={电子邮件，密码}
this.http.get（urlCsrf）.pipe(
switchMap（（）=>this.http.post（url，body，{withCredentials:true}）
).subscribe（（resp）=>console.log（resp））；

如果要将
with credentials
应用于所有请求，应查看注释中提到的拦截器。一个简单示例：

@Injectable（）
导出类CredentialsInterceptor实现HttpInterceptor{
构造函数（）{}
截取（req:HttpRequest，next:HttpHandler）：可观察{
返回next.handle（req.clone（{withCredentials:true}））；
}
}

然后将其导入您的
AppModule

提供者：[
{提供：HTTP_拦截器，useClass:EngagementXSRFInterceptor，multi:true}，
]
该代码转换为：

const body={电子邮件，密码}
this.http.get（urlCsrf）.subscribe（（）=>{
this.http.post（url，body，{withCredentials:true}）.subscribe（（resp）=>{
控制台日志（resp）；
});
});

如果您想以更具反应性的方式编写：

const body={电子邮件，密码}
this.http.get（urlCsrf）.pipe(
switchMap（（）=>this.http.post（url，body，{withCredentials:true}）
).subscribe（（resp）=>console.log（resp））；

如果要将
with credentials
应用于所有请求，应查看注释中提到的拦截器。一个简单示例：

@Injectable（）
导出类CredentialsInterceptor实现HttpInterceptor{
构造函数（）{}
截取（req:HttpRequest，next:HttpHandler）：可观察{
返回next.handle（req.clone（{withCredentials:true}））；
}
}

然后将其导入您的
AppModule

提供者：[
{提供：HTTP_拦截器，useClass:EngagementXSRFInterceptor，multi:true}，
]
你试过使用拦截器吗
this.http.get（urlCsrf，{withCredentials:true}）
你试过使用拦截器吗
this.http.get（urlCsrf，{withCredentials:true}）
？泰埃科，请给我几天时间测试一下。您好，第一个选项，我收到错误419，“CSRF令牌不匹配。”您可以在匿名模式下尝试，或者清除浏览器缓存以确保它们不是旧的Cookie吗？在第二个选项中，您在rxjs运算符之后调用subscribe，我必须仅使用运算符返回响应，并且在我的登录组件中使用subscribe调用服务方法。我收到相同的错误。CSRF令牌不匹配是的，我清除了Cookie和缓存，但只使用axios，我不知道为什么。使用了另一个浏览器，并且不知名。Ty Eko，请给我几天时间测试。您好，第一个选项，我收到错误419，“CSRF令牌不匹配。”您可以在匿名模式下尝试，或者清除浏览器缓存以确保它们不是旧的Cookie吗？在第二个选项中，您在rxjs运算符之后调用subscribe，我必须仅使用运算符返回响应，并且在我的登录组件中使用subscribe调用服务方法。我收到相同的错误。CSRF令牌不匹配.我做了，我清除了Cookie和缓存，但只使用axios，我不知道为什么。使用了另一个浏览器，并且匿名。