Получение ошибки cors только при вызове URL-адреса изображения через HTTP-запрос, но все API-интерфейсы работают так хорошо, кроме этого

Question

Получение ошибки cors только при вызове URL-адреса изображения через http-запрос, но все API-интерфейсы работают так хорошо, кроме этого.

Доступ к XMLHttpRequest по адресу https: // ********* / diamond-grey.png 'from origin' http://localhost: 8100 'заблокировано политикой CORS: в запрошенном ресурсе отсутствует заголовок' Access-Control-Allow-Origin '.

httpcall.ts

`let header = new Headers();
    header.set('Access-Control-Allow-Origin', '*');

    let options = new RequestOptions({ headers: header});
  await this.http.get(url,  {
        responseType: ResponseContentType.Blob,
      })
      .toPromise()
      .then((res: any) => {
        let blob = new Blob([res._body], {
          type: res.headers.get("Content-Type")
        });

        let urlCreator = window.URL;
        return this.domSanitizer.bypassSecurityTrustUrl(
              urlCreator.createObjectURL(blob));
        });`

Answer 1

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

Answer 2

Заголовок CORS должен быть установлен на стороне сервера, а не на внешнем коде.

В вашем коде angular вместо загрузки изображения с помощью запроса xml http вы можете создать тег изображения и динамически предоставить sr c. Обратите внимание, что тег Image допускает запрос CORS, поэтому вы не столкнетесь с этой проблемой.