角9:未亮的DOMException:用原点阻塞帧

Question

我刚刚开发了一个角应用程序的签名认证，然后我去测试它。注册工作还不错。然后我登录并尝试登录，而标题没有按预期更新，相反，我在控制台中得到了这个错误：

"chrome-extension://hdokiejnpimakedhajhdlcegeplioahd“：阻止具有原始

的帧访问跨原点帧.新e (chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/lpfulllib.js:1:1444920) e as constructor at chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/lpfulllib.js:1:1461728

但我没有被认证，因为我得到了：

{authenticated: false, username: null}
authenticated: false
username: null

尽管GET请求本身通过了成功，但是存在一个问题，因为它不应该是GET请求，而是POST请求。为什么它认为这是一个GET请求？

我在auth服务中的signin()方法清楚地显示了它是一个post请求：

signin(credentials: SigninCredentials) {
    return this.http.post(this.rootUrl + "/auth/signin", credentials).pipe(
      tap(() => {
        this.signedin$.next(true);
      })
    );
  }

以下是我的auth http拦截器代码：

import { Injectable } from "@angular/core";
import {
  HttpEvent,
  HttpInterceptor,
  HttpHandler,
  HttpRequest,
  HttpEventType,
} from "@angular/common/http";
import { Observable } from "rxjs";

@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    // Modify or log the outgoing request
    const modifiedReq = req.clone({
      withCredentials: true,
    });

    return next.handle(modifiedReq);
  }
}

现在我不认为问题在我的AuthHttpInterceptor，我相信问题在AuthService

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { BehaviorSubject } from "rxjs";
import { tap } from "rxjs/operators";

interface UsernameAvailableResponse {
  available: boolean;
}

interface SignupCredentials {
  username: string;
  password: string;
  passwordConfirmation: string;
}

interface SignupResponse {
  username: string;
}

interface SignedinResponse {
  authenticated: boolean;
  username: string;
}

interface SigninCredentials {
  username: string;
  password: string;
}

@Injectable({
  providedIn: "root",
})
export class AuthService {
  rootUrl = "https://api.my-email.com";
  signedin$ = new BehaviorSubject(false);

  constructor(private http: HttpClient) {}

  usernameAvailable(username: string) {
    return this.http.post<UsernameAvailableResponse>(
      this.rootUrl + "/auth/username",
      {
        username,
      }
    );
  }

  signup(credentials: SignupCredentials) {
    return this.http
      .post<SignupResponse>(this.rootUrl + "/auth/signup", credentials)
      .pipe(
        tap(() => {
          this.signedin$.next(true);
        })
      );
  }

  checkAuth() {
    return this.http
      .get<SignedinResponse>(this.rootUrl + "/auth/signedin")
      .pipe(
        tap(({ authenticated }) => {
          this.signedin$.next(authenticated);
        })
      );
  }

  signout() {
    return this.http.post(this.rootUrl + "/auth/signout", {}).pipe(
      tap(() => {
        this.signedin$.next(false);
      })
    );
  }

  signin(credentials: SigninCredentials) {
    return this.http.post(this.rootUrl + "/auth/signin", credentials).pipe(
      tap(() => {
        this.signedin$.next(true);
      })
    );
  }
}

Answer 1

我看你没有HttpHeaders。虽然我没有看到您的后端配置，但我怀疑错误配置会导致您的异常。

您可以将您的角度分配器更新为以下内容：

import {
  HttpEvent,
  HttpHandler,
  HttpHeaders,
  HttpInterceptor,
  HttpRequest,
} from '@angular/common/http'
import { Injectable } from '@angular/core'
import { Observable } from 'rxjs'

@Injectable()
export class AuthHttpInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   // const token = localStorage.getItem('access_token')
   // const userToken = localStorage.getItem('id_token')

    if (token) {
      const authRequest = req.clone({
        setHeaders: {
          'Content-Type': 'application/json',
         // Authorization: `Bearer ${token}`,
         // userID: `${userToken}`,
        },
      })
      return next.handle(authRequest)
    } else {
      const headers = new HttpHeaders({
        'Content-Type': 'application/json',
      })
      const cloned = req.clone({
        headers,
      })
      return next.handle(cloned)
    }
  }
}

还要确保后端对齐，并将头(如Access-Control-Allow-Origin )配置为true。

Answer 2

这是由LastPass扩展引起的。关闭它，错误就会消失。