在 Angular 应用程序中使用跨域资源共享
跨域资源共享（CORS）是一个安全机制，用于保护 Web 应用程序免受跨站请求伪造（CSRF）攻击。在 Angular 应用程序中，您可以通过使用 Angular 的 HttpClient 来实现与远程 Web API 的通信。然而，从 Angular 应用程序中发出的 HTTP 请求可能会受到浏览器的限制，因为浏览器默认情况下不允许在不同的域之间共享资源。
在本文中，我们将介绍如何在 Angular 应用程序中使用 CORS 以及如何解决可能遇到的问题。
CORS 基础知识
CORS 是跨域资源共享的缩写。它是一个安全机制，用于在不同的域之间跨域共享资源。跨域资源共享是由 W3C 规范定义的一种机制，它允许服务器在 HTTP 首部中发送特定的响应头，以允许来自其他域的请求访问其资源。CORS 允许 Web 应用程序通过 Ajax 或 WebSocket 等技术与其他域上的资源进行通信。
在 Angular 应用程序中使用 CORS
在 Angular 应用程序中使用 CORS 需要遵循以下步骤：
- 启用 CORS 服务
要在 Angular 应用程序中使用 CORS，您需要启用 CORS 服务。可以通过在应用程序的 HTTP 拦截器中添加以下代码来实现：
// javascriptcn.com 代码示例
@Injectable()
export class CorsInterceptor implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({
setHeaders: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, DELETE',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
}
});
return next.handle(request);
}
}通过在拦截器中设置“Access-Control-Allow-Origin”头，请求将被认为是跨域请求，从而被允许。
- 启用 CORS 响应头
要启用 CORS 响应头，您需要在远程 Web API 的响应头中包含以下代码：
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, DELETE');
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept, Authorization');在响应头中包含这些信息可以解除浏览器的限制，确保跨域资源共享得以实现。
- 测试跨域资源共享
为了测试跨域资源共享，请确保正确添加了 CORS 拦截器，并在远程 Web API 响应头中添加了相应的响应头。接下来，在 Angular 应用程序中创建 HTTP 请求，并附加必要的请求头：
// javascriptcn.com 代码示例
import { HttpClient, HttpHeaders } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
})
};
this.http.post('/api/endpoint', data, httpOptions).subscribe(response => {
console.log(response);
});在这个示例中，我们使用 Angular 的 HttpClient 发送 HTTP POST 请求。我们添加了一个请求头来传递身份验证令牌。请注意，“Content-Type”字段已设置为“application/json”。
总结
CORS 是一个安全机制，用于在不同的域之间跨域共享资源。在 Angular 应用程序中使用 CORS 需要启用 CORS 服务，并在远程 Web API 的响应头中包含相应的响应头。在发送 HTTP 请求时，确保附加必要的请求头。通过使用 CORS，我们可以跨域共享资源，从而实现更广泛的应用程序访问。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652b6aaa7d4982a6ebd54568