Почему мой угловой HTTP-запрос не может быть получен на локальном сервере Django?

Question

Я сделал приложение Angular способным использовать онлайн API, чтобы получить JSON и делать вещи. Но, хотя json тот же, если я пытаюсь изменить только URL-адрес json, установив локальный URL-адрес сервера, написанного на django, angular, похоже, больше не подключается ...

У меня вопрос: почему, если сервер с онлайн-облаками работает, с локальным не будет?

Я попытался сделать этот сервер «в облаке», открыв порт маршрутизатора, также настроив ddns, и используя почтальон или браузер, похоже, он работает, но когда я пытаюсь соединиться с angular, он все равно не получает данные ...

Я уверен на 100%, что сервер отвечает с правильными данными json, потому что django печатает на консоли, что он получил HTTP-запрос GET: http://i.imgur.com/TIQnIcR.png

Напоминаю, что угловой запрос HTTP работал с другим API, но я все равно покажу некоторый код:

export class ProdottoService {
  private prodotti: Array<ProdottoModel>;
  constructor(private httpClient: HttpClient) {
    this.prodotti = new Array<ProdottoModel>();

    var url:string = "https://gist.githubusercontent.com/saniyusuf/406b843afdfb9c6a86e25753fe2761f4/raw/523c324c7fcc36efab8224f9ebb7556c09b69a14/Film.JSON";
    var local_url:string = "http://127.0.0.1:8000/films/?format=json";

    httpClient.get(local_url)
        .subscribe((films : Array<Object> ) => {
          films.forEach((film => {
                this.prodotti.push(new ProdottoModel(film));
            }));
          }
        );

  }
  getProdotti(): Array<ProdottoModel> {
    return this.prodotti;
  }
}

Результат с использованием внешнего API:

http://i.imgur.com/MT7xD9c.png

Спасибо заранее за любую помощь: 3

- РЕДАКТИРОВАТЬ - ВЫПУСК CORS

В файле django settings.py:

CORS_ORIGIN_WHITELIST = (
    'localhost:8000',
    '127.0.0.1:4200'
)


INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
    ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

Но я не знаю, есть ли способ настройки CORS в Angular

Answer 1

На вашем скриншоте похоже, что ответ типа "документ ..." что-то. Простейшее исправление, содержащее только этот код, заключается в преобразовании строки в JSON.

JSON.parse(films)

Это неправильный ответ, потому что он установлен на него из-за проблемы CORS в других ответах.

Answer 2

Судя по отзывам, это проблема CORS. Ваш сервер Django получает запросы и отвечает, потому что localhost является неявно доверенным доменом в среде разработчика Django, но он не настроен должным образом для настройки заголовка перекрестного источника, поэтому браузер не позволяет вашему приложению видеть ответ, потому что сервер явно не авторизовал домен.

Проблема в том, что вы установили белый список CORS следующим образом:

CORS_ORIGIN_WHITELIST = ( 'localhost:8000', '127.0.0.1:4200' )

должно быть так:

CORS_ORIGIN_WHITELIST = ( 'localhost:4200' )

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