Angular Interceptor 修改标头更改请求方法答案

【问题标题】：Angular Interceptor modify headers change request methodAngular Interceptor 修改标头更改请求方法
【发布时间】：2019-10-27 23:55:31
【问题描述】：

我有一个 angulat http 拦截器，它试图将授权标头添加到请求中，但是当代码运行时，生成的请求不是我所期望的，方法从 POST 更改为 OPTIONS，我收到如下错误：

从源“http://localhost:4200”访问“http://localhost/authorization/oauth/token”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：它没有 HTTP ok 状态。

@Injectable()
export class DlkmInterceptor implements HttpInterceptor {

 constructor() {
 }

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

   if (request.url === authConfig.tokenEndpoint && request.method === 'POST') {
     let authData = window.btoa(authConfig.clientId + ':' + authConfig.dummyClientSecret);
     request = request.clone({
       setHeaders: {
         'Content-Type': 'application/x-www-form-urlencoded',
         'Authorization': 'Basic ' + authData
       }
     });
     return next.handle(request);

   } else {
     request = request.clone({});
     return next.handle(request)
   }

 }
}

【问题讨论】：

标签： angular typescript http

【解决方案1】：

这是预期的行为。这是由于浏览器的Cross Origin Policy。

由于您从托管 Angular 应用程序的域以外的域请求资源，因此浏览器将遵循跨域策略

当您从不同来源请求资源时，浏览器首先检查您是否可以通过发送 OPTIONS 请求（也称为 preflight 请求）来实际请求该资源

您需要允许后端服务器中的标头才能使预检请求成功，当预检请求成功时，您的浏览器将发出实际请求。

你可以了解更多关于这个话题here

【讨论】：

是的，但是如果我删除添加标题的代码，我会按预期收到 POST 请求！
@HamidIng 那是因为拦截器添加了Authorizationheader，所以这不再是一个“简单”的请求，所以浏览器需要先发送一个预检请求：developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests
@asim-hashmi 和 david 非常感谢您的帮助我对后端源代码进行了一些修改以允许 CORS