2

我正在尝试使用 Sanctum 将我的 angular-app 连接到我的 Laravel 7。

后端在 wamp 虚拟主机调用（pruebas.test）中运行，配置如下：

.env：

APP_URL=http://pruebas.test
SESSION_DOMAIN=pruebas.test
SANCTUM_STATEFUL_DOMAINS=localhost:4300

配置/cors.php

paths' => [
        'api/*',
        '/login',
        '/logout',
        '/sanctum/csrf-cookie'
    ],

'supports_credentials' => true,

config/session.php（现在是same_site 等于none，但我尝试了宽松、严格和空选项）

'same_site' => "none",

内核.php

'api' => [
            EnsureFrontendRequestsAreStateful::class,
            'throttle:60,1',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],`

在前面，我们使用 Angular 10 并实现了一个使用以下代码登录的方法：

login(): void {
    const url = `http://pruebas.test/sanctum/csrf-cookie`;
    this.http.get<any>(url).subscribe((res) => {
      console.log(res);

      // the response is correct but not set the cookies
      // this.http.post<any>('http://pruebas.test/api/v1/login', { password: 'password', 'email': 'twatsica@example.com' }).subscribe(success => {
      //   console.log(success);
      //   this.http.get<any>('http://pruebas.test/api/v1/articles').subscribe(success => console.log(success));
      // }
      //   , error => console.log(error))
    })
  }

此外，我们还可以在标头请求中添加 withCredentials 并拦截：

export class AuthInterceptor implements HttpInterceptor {
    headerName = 'X-XSRF-TOKEN';

    constructor(private tokenService: HttpXsrfTokenExtractor) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        req = req.clone({
            withCredentials: true
        })
        console.log(req);
        req.headers.set('withCredentials', 'true');
        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);
    }
}

但是浏览器从不设置 cookie，这取决于'same_site'我们有不同响应的配置，但 cookie 从未设置。

same_site=lax => 此 Set-Cookie 已被阻止，因为它具有“SameSite=lax”属性，但来自跨站点响应，不是对顶级导航的响应。

same_site=strict => 此 Set-Cookie 已被阻止，因为它具有“SameSite=strict”属性，但来自跨站点响应，而不是对顶级导航的响应。

same_site=none => 此 Set-Cookie 已被阻止，因为它具有“SameSite=none”属性但没有“Secure”属性，这是使用“SameSite=none”所必需的

一些想法？

4

0 回答 0