Angular5如何移除特定请求的Content-Type请求头以通过CORS预检？

当然可以针对目标API请求移除Content-Type请求头，而且Angular的HTTP拦截器绝对是做这个操作的最佳位置——它能帮你统一管控所有HTTP请求，同时精准过滤出需要修改的特定请求，不用在每个请求调用处重复写逻辑，维护起来非常方便。

具体实现步骤 #

1. 创建自定义拦截器
   实现Angular的HttpInterceptor接口，在intercept方法里判断请求是否属于目标API，若是则克隆请求并移除Content-Type头：

   import { Injectable } from '@angular/core';
   import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
   import { Observable } from 'rxjs/Observable';
   
   @Injectable()
   export class RemoveContentTypeInterceptor implements HttpInterceptor {
     // 替换成你的目标API的URL标识（可以是完整URL或特定路径片段）
     private targetApiMarker = '/your-target-api-path/';
   
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       // 匹配目标API请求
       if (req.url.includes(this.targetApiMarker)) {
         // 克隆请求并移除Content-Type头
         const modifiedRequest = req.clone({
           headers: req.headers.delete('Content-Type')
         });
         return next.handle(modifiedRequest);
       }
       // 非目标请求直接放行
       return next.handle(req);
     }
   }
   

2. 在模块中注册拦截器
   把自定义拦截器添加到模块的提供者中，让Angular生效这个拦截逻辑：

   import { NgModule } from '@angular/core';
   import { HTTP_INTERCEPTORS } from '@angular/common/http';
   import { RemoveContentTypeInterceptor } from './path-to-your-interceptor/remove-content-type.interceptor';
   
   @NgModule({
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: RemoveContentTypeInterceptor,
         multi: true // 允许多个拦截器并存
       }
     ]
   })
   export class AppModule { }
   

关键注意事项 #

• 精准匹配请求：如果目标API有多个路径，可以用正则表达式替代includes，比如/^https:\/\/api.example.com\/v2\//.test(req.url)，确保只修改需要的请求。
• 请求体兼容：如果你的请求带有请求体，移除Content-Type后，浏览器会自动设置默认的application/x-www-form-urlencoded头，需要确认目标API能接受这种内容格式。
• 预检请求处理：浏览器自动发送的OPTIONS预检请求也会被拦截器处理，移除Content-Type头后就能通过CORS预检检查，这正是我们需要的效果。

内容的提问来源于stack exchange，提问作者cobolstinks