时间戳

首页 > 解决方案 > 为什么添加 HTTP 拦截器会导致 CORS 错误？

angular - 为什么添加 HTTP 拦截器会导致 CORS 错误？

问题描述

我正在开发一个带有 PHP REST Api 的 Angular 6 应用程序。我的开发环境托管在我的本地主机上，所以开始我必须启用 Access-Control-Allow-Origin: * 以绕过我遇到的任何 CORS 错误。

最近我一直在尝试使用拦截器来实现 JWT，以将它们添加到我的 HTTP 请求中。一旦我按照谷歌的例子启用了解释器，我就开始再次收到 CORS 错误：

blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header

我很肯定这与我的拦截器有关，因为当我将其注释掉时，它会再次起作用。这是我想要工作的拦截器的代码：

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from 
'@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/index';
import {AuthService} from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(public auth: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): 
Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
         'Content-Type' : 'application/json; charset=utf-8',
        // 'Accept'       : 'application/json',
        'Authorization': `Bearer ${this.auth.getToken()}`
      }
    });

    return next.handle(req);
  }
}

我什至试图将其剥离以仅将授权标头设置为可用。

如果我注释掉 Authorization 标头并留下 Content-Type，我仍然会收到 CORS 错误。如果我将内容类型更改为纯文本/文本，它可以工作，但我没有授权标头。如果我将内容类型保持为纯/文本并添加 Authorization 标头，则会收到 CORS 错误。

此时我只想查看 $_SERVER var 中的授权标头，因此 PHP 的测试非常简单：

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, 
OPTIONS');
header('Access-Control-Allow-Headers: Authorization, Access, Origin, 
Content-Type, X-Auth-Token');

echo json_encode(array(
        'status' => 0
        ,'message'=> $_SERVER
    ));

exit;

这是我的应用程序模块，用于显示拦截器已配置：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginFormComponent } from './login-form/login-form.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {AuthInterceptor} from './auth.interceptor';
import { MessagesComponent } from './messages/messages.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginFormComponent,
    MessagesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我用来发送 HTTP 请求的登录服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ServerResponse } from './server-response';
import {MessagesService} from './messages.service';
import {AuthService} from './auth.service';

@Injectable({
  providedIn: 'root'
})

export class LoginService {

  constructor(private http: HttpClient,
              private ms: MessagesService,
              private auth: AuthService) { }
  login(formData) {
    this.ms.clear();
    console.log('JSON data', JSON.stringify((formData)));
    console.log(this.auth.getToken());
    return this.http.post('http://jpapp.com/api/login/login.php',     JSON.stringify(formData))
      .subscribe((rs: ServerResponse) => {
        console.log('%cPost Success', 'color: green;');
        console.log(rs);
    }, (error) => ({status: -99, message: error}));
  }
}

如果我删除拦截器，Requet 标头看起来像这样（这就是我尝试将内容类型更改为纯/文本的想法的地方）：

Provisional headers are shown
Accept: application/json, text/plain, */*
Content-Type: text/plain
Origin: http://localhost:4200
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

当我启用拦截器时，请求标头如下所示：

Provisional headers are shown
Access-Control-Request-Headers: authorization,content-type
Access-Control-Request-Method: POST
Origin: http://localhost:4200
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

我已经读到我可能可以使用 chrome 扩展绕过这个，但想知道我的代码中是否有什么东西，然后再安装扩展来尝试。

任何信息表示赞赏！

标签： angularcorsinterceptor

解决方案

更新

编辑：我应该提到我发现将 req.clone() 设置为空白作品的原因是因为预检只发生在复杂而不是简单的cors 请求上。一旦您添加自定义标头，在我的情况下，授权或执行任何使其不再是简单请求的操作，默认情况下，它会使用 OPTIONS 方法发送预检请求，而不是在我的情况下是 POST。这篇文章很好地解释了 cors 和一个简单与复杂的请求：https ://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

预检响应错误与代码本身无关。问题在于我的 IIS 10 Web 服务器的配置。

在这篇文章之后：CORS 模块配置参考我将所需的 cors 节点添加到我的 web.config 文件中，现在它可以正常工作

通过安装 Allow-Control-Allow-Origin，我能够绕过预检请求 CORS 错误：* Chrome 扩展 https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl= zh

如果我将默认 URL 匹配更改为匹配我的 URL，它似乎仍然有效，我*://*/*再次收到 CORS 错误，但这可能只是我的模式匹配的问题。如果能解释它是如何工作的，那就太好了。

我仍在寻找一个原因，为什么通过拦截器传递授权会破坏服务器 Access-Control-Allow-Origin: * 因为我确信一旦我实际部署了这个应用程序和 api，我会再次遇到这个问题。将这个扩展与默认配置一起使用也是一个 PITA，因为它会破坏一堆站点。

推荐阅读