Добавьте заголовок CORS к ответу в Angular 6 - PullRequest
Новая
       35

Добавьте заголовок CORS к ответу в Angular 6

0 голосов
/ 04 декабря 2018

Я пытаюсь получить некоторые данные с внутреннего сервера в Angular 6, чтобы я мог визуализировать их по-своему.Я уже подготовил рабочий запрос GET, который приводит к правильному ответу со всеми необходимыми мне данными, но проблема в том, что когда он используется обычным образом, например, в «обычном» браузере, я получаю ошибку CORS -заголовок отсутствует.Так как мне получить данные даже с этой проблемой?Как правило, вы должны разрешить это на стороне сервера, но эта ситуация немного отличается.Я установил плагин Chrome, чтобы добавить заголовок к каждому запросу.С плагином проблема CORS больше не существует.

Так что мой вопрос в том, как (и если) я могу добавить заголовок CORS в своем коде 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)}`);
      });
  }

}

Я пытался использовать Interceptor способом по этой ссылке , используя app.module.ts.Это полностью сломало мое приложение, потому что я получаю ошибку 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, как это было использовано в документации .Хотя я все еще что-то упускаю.

Ответы [ 3 ]

0 голосов
/ 04 декабря 2018

Когда вы включаете определенные заголовки, такие как Авторизация в ваш http-запрос кросс-источника, отправляемый на сервер, браузеры обычно отправляют запрос OPTIONS ( pre flight )к серверу, запрашивающему разрешенные Access-Control-Allow-Methods и разрешенные Access-Control-Allow-Headers , ваш код на стороне сервера должен ответить этим, чтобы браузер фактически сделал вашпредполагаемый http запрос

0 голосов
/ 04 декабря 2018

Вам не нужно устанавливать заголовки для запроса.Чтобы избежать ошибки CORS в Angular, вы должны использовать конфигурацию passxy для целей разработки.

добавить файл с именем proxy.conf.json около package.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": "/"
  }
 }
}

измените команду serve с небольшим изменением: 

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

Теперь запрос к бэкэнду будет исходить из того же самого углового домена и больше не будет CORS ошибка

Примечание : эта конфигурация прокси-сервера предназначена только для разработки.Для производственной среды Вам необходимо настроить веб-серверы.

0 голосов
/ 04 декабря 2018

Так не работает.Cors - это то, что обрабатывается на стороне сервера.Где Serveradministrator устанавливает эти заголовки и разрешает определенные домены.Вы, вероятно, должны изучить JsonP или, как вы сказали, контроль над данными, чтобы разрешить ваш домен на вашем сервере.Это Разрешить доступ к заголовкам

...