Ошибка "заблокирована политикой CORS" в приложении Angular, в котором выполняется локальный экземпляр API - PullRequest
Новая
       18

Ошибка "заблокирована политикой CORS" в приложении Angular, в котором выполняется локальный экземпляр API

1 голос
/ 15 мая 2019

Я тестирую наше приложение Angular (работает на http://localhost:4200) на локальном экземпляре нашего API на основе Node / Express / MongoDB (которое я запускаю на http://localhost:3000).

Одна из конечных точек, которые я тестирую, используется для того, чтобы позволить нашим внутренним пользователям загружать файл. Теперь, на нашем фактическом URL-адресе API, у нас есть набор политик CORS (подробнее см. Ниже) - и это внутренний офисприложение работает за VPN.

Но когда я пытаюсь проверить эту функцию загрузки в своем локальном приложении, работающем на локальном экземпляре API, я получаю следующее сообщение об ошибке:

Доступв XMLHttpRequest в 'http://localhost:3000/v0/filegenerator/download?emailDocId=47dh385686e780c18e905&apikey=9d98e41d-44e9-4bbb-ab3d-35b7df5272dc&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJDUkVXTWVtYmVyIjoiNWmNoIjoiU2MDc0ODd9.bA5B5bx4wPSSiVCS_LxTK1gifjtif8dj29sfUBHqpOg' от источника' http://localhost:4200' заблокирован политикой CORS: Ответ на предпечатный запрос не проходит проверку контроля доступа: не имеет статуса HTTP ok.

Несколько вопросов здесь:

1.) Это общее сообщение об ошибке безопасности Chrome?

2.) Есть ли способ, которым я могу отключить это, поэтому яможно проверить загрузку файла?Или я могу только проверить это, нажав наш действующий API?

Как лучше всего обойти это в моей среде тестирования?

Добавлено примечание: у меня есть расширение CORS - "Разрешить-Control-Allow-Origin: * 1.0.3 "- установлен в Chrome, и в настоящее время установлено« Включить общий доступ к ресурсам из разных источников ».

Кроме того, в нашей серверной среде Node / Express это наша текущая версия.настройка: 

  app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
    return next();
  });

Ответы [ 3 ]

1 голос
/ 15 мая 2019

В целях тестирования вы можете использовать флаг disable-web-security в Chrome.

  • Закройте все окна Chrome.
  • Выполните chrome.exe --disable-web-security
0 голосов
/ 15 мая 2019

Заголовки CORS - это, по сути, способ сказать серверу: «Я распознаю эти другие серверы как источники для отправки мне запросов, и это должно быть безопасно для браузера».Если заголовок отсутствует, то безопасными считаются только запросы, отправленные с того же сервера.

Вы должны иметь возможность настроить локальное приложение для добавления заголовка к ответу.

Заголовок простого текста будет выглядеть как Access-Control-Allow-Origin: localhost:4200

0 голосов
/ 15 мая 2019

Это общая функция безопасности в браузерах. Вы не можете выключить его. Один из способов обойти это - разрешить свое происхождение на стороне сервера, установив заголовок Access-Control-Allow-Origin. Однако это не будет работать для запросов предварительной проверки (OPTIONS), если вы не обрабатываете их отдельно.

Если это невозможно (из-за сторонних библиотек, сервисов, аутентификации и т. Д.), Вы можете настроить обратный прокси-сервер в Angular, который позволит вам туннелировать все ваши запросы. В браузере похоже, что ваши запросы отправляются в тот же домен (и порт), что и ваше угловое приложение (и, следовательно, предполагается, что они имеют то же происхождение).

Просто создайте proxy.conf.js в своем проекте следующим образом: 

const path = "/proxy_path/*";
const proxy = "/proxy_path/";

const pathRewrite = {};
pathRewrite["^" + proxy.slice(0, -1)] = "";

const configs = {
    target: 'your_service_url',
    secure: false,
    changeOrigin: true,
    pathRewrite,
    logLevel: "debug"
}

const PROXY_CONFIG = {};
PROXY_CONFIG[path] = configs;

module.exports = PROXY_CONFIG;

И используйте ng serve --host 0.0.0.0 --disable-host-check --proxy-config <PATH_TO_PROXY_CONF>, чтобы запустить его.

Надеюсь, это поможет!

...