在 Angular 6 中将 CORS 标头添加到响应中

Question

我正在尝试从 Angular 6 中的后端服务器获取一些数据，以便以我自己的方式对其进行可视化。我已经准备了一个有效的 GET 请求，它可以对我需要的所有数据做出正确的响应，但问题是当它以典型方式使用时，例如在“普通”浏览器中，我收到了 CORS 错误 -标题丢失。那么即使有这个问题，我如何获取数据呢？通常，您必须在服务器端允许它，但这种情况有点不同。我已经安装了一个 Chrome 插件来为每个请求添加标题。有了这个插件，CORS 问题就不复存在了。

所以我的问题是，如何（以及是否）将我的 Angular 代码中的 CORS 标头添加到响应中，这样我就不必使用任何插件，并且该应用程序可以在每个浏览器上运行？

另外，为了防止任何 cmets，我获得的所有数据都是我可以合法访问的，它们是我自己的，我只是在 Angular 中学习新东西。据我所知，我应该使用拦截器，但我很确定我做错了。这是我的代码：

http服务方式：

  getFullResponse(domain: string, projectName: string, credentials: Credentials) {
    console.log('RequestService method getIssuesForProject() fired');

    return this.http.get('https://' + domain + '.myserver.local/api/' + projectName,
      {
        headers: new HttpHeaders({'Authorization': 'Basic ' + btoa(credentials.username + ':' + credentials.password)}),
        observe: 'response'
      }
    );
  }

我写的拦截器类：

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

@Injectable()
export class ResponseInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      map(event => {
        if (event instanceof HttpResponse) {
          event = event.clone({
            headers: event.headers.set('Access-Control-Allow-Origin', '*')
          });
        }
        return event;
      })
    );
  }

}

这是 component.ts 类：

import {Component, OnInit} from '@angular/core';
import {RequestService} from '../../shared/service/RequestService.service';
import {Credentials} from '../../shared/model/credentials';

@Component({
  selector: 'app-project',
  templateUrl: './project.component.html',
  styleUrls: ['./project.component.css']
})
export class ProjectComponent implements OnInit {

  projectKey = '';
  headers;
  credentials: Credentials;

  constructor(private reqService: RequestService) {
  }

  ngOnInit() {
  }

  onSubmit(domainName: string, projectKey: string, user: string, password: string) {
    this.projectKey = projectKey;
    this.credentials = {
      username: user,
      password: password
    };
    this.reqService.getFullResponse(domainName, projectKey, this.credentials)
      .subscribe(resp => {
        const keys = resp.headers.keys();
        this.headers = keys.map(key => `${key}: ${resp.headers.get(key)}`);
      });
  }

}

我尝试使用 app.module.ts 以 link 下的方式使用拦截器。这完全破坏了我的应用程序，因为即使打开了 CORS 插件，我也会收到 CORS 错误。我在互联网上找到的其他代码示例使用了类似

的代码

return next.handle(reqClone) 
       .map(event => { 
         if (event instanceof HttpResponse) { 
           event = event.clone({ 
             headers: event.headers.set('x-test-res', 'res-test-header') 
           }); 
         } 
         return event; 
}); 

在拦截器中，但我猜它是针对旧版本的 Angular，我不能以这种方式使用 map 方法，所以我尝试在 pipe 中使用它，就像在 @987654322 中使用它一样@。不过，我仍然缺少一些东西。

Answer 1

它不是那样工作的。 Cors 是在服务器端处理的东西。服务器管理员设置这些标头并允许某些域的位置。您应该适当地查看JsonP，或者如果您像您所说的那样控制数据，请查看允许您的域在您的服务器上。这些是Acces Control Allow Headers

Answer 2

当您在向服务器发出的跨源 http 请求中包含某些标头（例如 Authorization）时，浏览器通常会发出 OPTIONS（pre flight >) 向服务器请求允许的 Access-Control-Allow-Methods 和允许的 Access-Control-Allow-Headers，您的服务器端代码应使用这些响应浏览器实际发出您想要的 http 请求

Answer 3

您不需要为请求设置标头。为了避免 Angular 中的 CORS 错误，您应该使用 proxy pass 配置进行开发。

在 package.json 附近添加一个名为 proxy.conf.json 的文件。从您的请求获取 URL 添加 /proxy

 this.http.get('/proxy/api/' + 
  projectName).subscribe(resData => {
        console.log(resData);
  });

在proxy.conf.json中设置代理规则为

{
  "/proxy/*": {
  "target": "http://backendDomain:8080",
  "secure": false,
  "logLevel": "debug",
  "changeOrigin": true,
  "pathRewrite": {
  "^/proxy": "/"
  }
 }
}

只需稍加修改即可更改服务命令：

ng serve --proxy-config proxy.conf.json --port 55055 --host 0.0.0.0

现在对后端的请求将来自相同的角度域，不会再有 CORS 错误

注意：此代理配置仅用于开发目的。对于生产环境你应该在 webservers 中配置。