Вызов внешнего API с использованием Angular 7 - PullRequest
Новая
       37

Вызов внешнего API с использованием Angular 7

0 голосов
/ 30 ноября 2018

Я использую Angular 7. Я новичок в Angular, и это моя фаза обучения.Я собираюсь разработать демонстрационное приложение, которое позже будет улучшено в PWA (прогрессивное веб-приложение).По сути, я собираюсь создать мультимедийное приложение, которое будет воспроизводить видео различных категорий, таких как новости, спорт и т. Д. Я получаю данные о категориях из URL-адреса фида JSON, который управляется где-то на стороне сервера.У каждой категории есть разные URL CDN, где мы можем получить URL видео.

Теперь моя проблема в том, что, когда я пытаюсь получить данные из URL-адреса фида JSON, он возвращает ошибку политики CORS, и я не могу получить данные, используя угловую.

Я искалв Google, но не может найти решение.В большей части статьи предлагалось разрешить заголовок «Access-Control-Allow-Origin» в коде на стороне сервера.Но я получаю данные из разных CDN, и у меня нет доступа к этим CDN.

Как угловой доступ к данным с внешнего канала URL?Как включить перекрестные запросы в Angular JS?Если нам нужно разместить сервер промежуточного программного обеспечения, и все запросы будут проходить через этот сервер, где мы можем разрешить CORS.

Ответы [ 5 ]

0 голосов
/ 30 ноября 2018

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

если вы добавляете URL-адрес непосредственно в код, вы должны явно пометить его как безопасный. 

<div [src]="www.example.com/id | safe: 'resourceUrl'"></div>

и создайте новый канал: 

import { Pipe, PipeTransform } from '@angular/core';
import {
  DomSanitizer,
  SafeHtml,
  SafeStyle,
  SafeScript,
  SafeUrl,
  SafeResourceUrl
} from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {
  constructor(protected sanitizer: DomSanitizer) {}

  public transform(
    value: any,
    type: string
  ): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
      case 'html':
        return this.sanitizer.bypassSecurityTrustHtml(value);
      case 'style':
        return this.sanitizer.bypassSecurityTrustStyle(value);
      case 'script':
        return this.sanitizer.bypassSecurityTrustScript(value);
      case 'url':
        return this.sanitizer.bypassSecurityTrustUrl(value);
      case 'resourceUrl':
        return this.sanitizer.bypassSecurityTrustResourceUrl(value);
      default:
        throw new Error(`Invalid safe type specified: ${type}`);
    }
  }
}

Теперь вам нужно импортировать то же самое в модуле приложения в разделе объявлений 

 declarations: [
...
    SafePipe
...
  ],
0 голосов
/ 30 ноября 2018

Вы можете использовать прокси для среды разработки.Просто прочитайте: https://angular.io/guide/build#using-corporate-proxy

Но для производства, возможно, вам понадобится прокси-сервер, и он будет получать ваши запросы, использовать API-адреса веб-сайта, который вы используете, или просто проксировать URL-адреса, которые вы хотите получить.

0 голосов
/ 30 ноября 2018

Если API, к которому вы подключаетесь, поддерживает JSONP, вы можете использовать его.JSONP - это способ обойти проблему Access-Control-Allow-Origin, но он должен поддерживаться API.

Способ, которым это работает, заключается в том, что сервер возвращает ответ, заключенный в функцию parseResponse(...).Затем вы связываетесь с API, создавая теги , причем src указывает на вызов API.Когда скрипт загружает, он выполняет функцию, позволяя вам получить данные, реализовав указанную функцию.

Кроме этого, вы не можете.Весь смысл предотвращения перекрестного происхождения заключается в том, чтобы помешать вам сделать именно это.Angular или любые другие фреймворки javascript могут помочь вам преодолеть это ограничение.

Ваше предложение об использовании сервера для этих запросов - это потенциальный обходной путь, но если это просто приложение для проверки концепции, вы можете просто деактивировать браузер.политика перекрестного происхождения.

Вот расширение chrome, которое делает именно это:

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

0 голосов
/ 30 ноября 2018

В angular нет хаков для преодоления политик CORS.Вы должны разрешить свой ip с сервера (сервера).если вы хотите получить медиафайлы без изменений на сервере, вам нужно найти общедоступный API для получения медиафайлов.

0 голосов
/ 30 ноября 2018

Из веб-документов MDN:

Обмен ресурсами между источниками (CORS) - это механизм, который использует дополнительные заголовки HTTP, чтобы сообщить браузеру, чтобы веб-приложение, работающее в одном источнике (домене), имелоразрешение на доступ к выбранным ресурсам с сервера из другого источника.Веб-приложение отправляет HTTP-запрос перекрестного источника, когда оно запрашивает ресурс, источник которого (домен, протокол и порт) отличается от своего собственного источника.

Короче говоря, это означает, что браузерблокирует запросы из разных источников для вашего углового приложения.Существуют методы, позволяющие обойти политику браузера, основанную на том же происхождении (т. Е. Обратные прокси-серверы), но наилучшим подходом для вашего случая будет запрос этих CDN с помощью собственного внутреннего сервера (т. Е. Промежуточного программного обеспечения), а затем получение запрашиваемых данных из вашегособственный сервер с вашим угловым приложением.

...