在Angular中，当你的前端代码试图从不同域名或端口中请求数据时，就会出现“跨域请求被阻止”（Cross-Origin Request Blocked）的问题。这是因为浏览器的同源策略（Same-Origin Policy）限制了从不同来源的请求。

要解决这个问题，你可以在后端设置CORS（跨域资源共享）策略，或者通过Angular的HTTP拦截器来处理。

下面是一个通过HTTP拦截器解决跨域请求问题的代码示例：

1. 在app.module.ts中引入HTTP拦截器

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { AppComponent } from './app.component'; import { ApiService } from './api.service'; import { HttpErrorInterceptor } from './http-error.interceptor';

@NgModule({ imports: [BrowserModule, HttpClientModule], declarations: [AppComponent], providers: [ApiService, { provide: HTTP_INTERCEPTORS, useClass: HttpErrorInterceptor, multi: true }], bootstrap: [AppComponent] }) export class AppModule {}

2. 创建一个HTTP错误拦截器

import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse, HttpErrorResponse } from '@angular/common/http'; import { Observable, throwError } from 'rxjs'; import { retry, catchError } from 'rxjs/operators';

@Injectable() export class HttpErrorInterceptor implements HttpInterceptor { intercept(request: HttpRequest, next: HttpHandler): Observable> { return next.handle(request).pipe( retry(1), catchError((error: HttpErrorResponse) => { let errorMessage = ''; if (error.error instanceof ErrorEvent) { // 客户端的错误 errorMessage = 客户端错误: ${error.error.message}; } else { // 服务器端的错误 errorMessage = 服务器端错误: ${error.status}\n信息: ${error.message}; } console.log(errorMessage); return throwError(errorMessage); }) ) } }

3. 在api.service.ts中通过HTTP发送请求

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' }) export class ApiService { constructor(private http: HttpClient) {}

get(endpoint: string, options?: any): Observable { const headers = { 'Content-Type': 'application/json', 'Accept': 'application/json' };

return this.http.get(endpoint, { headers }).pipe(
  catchError((error) => {
    throw error;
  })
);

} }

通过实现一个HTTP拦截器，我们可以捕获所有从Angular中发出的HTTP请求，然后在请求发生错误时抛出一个错误。这样，我们就可以捕获并处理从其它源请求数据时出现的任何错误。

以上是处理“跨域请求被阻止”的基本方法，你可以根据实际情况进一步定制和优化。