'Access-Control-Allow-Origin' на локальном хосте

Question

Я использую Angular для внешнего интерфейса и Symfony для внутреннего интерфейса.

Вот как я пытаюсь получить данные из внутреннего интерфейса:

getTechnologies(): Observable<Itechnologies[]> {
  return this.http.get<Itechnologies[]>('http://localhost/technologies');
}

Вот как можно попытаться отправить данные из внутреннего интерфейса:

public function getTechnologies(Request $request) {
    $technologies = $this->technologyService->getTechnologies($request->getContent());
    return new Response(json_encode($technologies));
}

Вот что я получаю:

Доступ к XMLHttpRequest в 'http://localhost/technologies' из источника' http://localhost:4200' заблокирован политикой CORS: На запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

Я также пробовал с header('Access-Control-Allow-Origin: *');, но я получаю ту же ошибку.

Почемуполучить эту ошибку, если они оба на локальном хосте?

Answer 1

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

1. Использовать плагин для браузера, который устанавливает заголовок CORS (пожалуйста, используйте только для локальной настройки dev).

2. Используйте локальный прокси, который доставляет оба (внешний и внутренний) на один и тот же порт (см. здесь ).

Конечно, вы также можете установитьЗаголовки ответов CORS для вашего приложения, но необходимые значения будут отличаться для разработки и производства. Также обратите внимание, что «Access-Control-Allow-Origin: *» никогда не следует использовать в производстве, так как он в основном отключает защиту CORS. Обратите внимание, что вы должны обрабатывать обязательные запросы OPTIONS для запросов, которые могут изменить состояние серверов (например, POST, PUT, DELETE и т. Д.), Если вы имеете дело с CORS.

Answer 2

Вы также можете взглянуть на этот пакет: https://github.com/nelmio/NelmioCorsBundle для своего бэкенда и указать его в зависимости от ваших разработчиков.