Как обойти ошибку перекрестного происхождения, используя угловую 6 (Firefox CORS Error, Chrome Preflight Error)

Question

Я разрабатываю интерфейс, который будет использоваться в качестве клиента для rest-api. Угловой 6 используется.

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

Услуги:

export class ApiConfigLogin {
      constructor(private http: HttpClient,
        private dataSrvc: DataService) {}

      private _url = this.dataSrvc.getMainUrl() + '/sec-login';

      private options = {
        headers: new HttpHeaders().set('Content-Type', 'application/json')
      };
      getResults(reqbody): Observable < ApiConfigLoginInterface > {
        console.log(this._url);
        return this.http.post < ApiConfigLoginInterface > (this._url, reqbody, this.options);
      }
    }

Component.ts

this._ApiConfigLogin.getResults(body)
      .subscribe(data => {
        this.enableForms();
        if (data.status === 401) {
          this.lowerMessage = data.message;
        } else {
          console.log(1);
        }
      });

в Mozilla Firefox:

Запрос на перекрестное происхождение заблокирован: одна и та же политика происхождения запрещает чтение удаленный ресурс на http://8888.8888.8888.8888:8888/address/sec-login. (Причина: Запрос CORS не был выполнен).

в Google Chrome:

Не удалось загрузить http://8888.8888.8888.8888:8888/address/sec-login: Ответ для предпечатная проверка недействительна (перенаправление)

Я протестировал Разрешить контрольные расширения для моих браузеров. Хорошо знать, что у меня есть заголовок типа контента:

Answer 1

Есть способы обойти это;См. this на GitHub о том, как обрабатывать клиентскую часть CORSS:

JSONP

ВНИМАНИЕ: это не такразрешено для каждого API и может сломаться при вызове определенного APIS

Вы можете обойти CORS в производственном процессе, используя JSONP, который обозначает JSON с Padding и является своего рода «хаком».Но это широко используемый хак, который поддерживают многие API.Вы не отправляете чистый JSON-запрос, но оборачиваете свои данные в функцию, которая оценивается.JSONP объяснил по ссылке ниже:

или используйте прокси:

Прокси

ВНИМАНИЕ: Великолепные услуги, но вызависит от работы этих сервисов, если они ломаются или выходят из строя, то же самое относится и к вашему приложению

Вы можете использовать сервис, который проксирует ваш запрос и автоматически включает CORS для вашего:

https://crossorigin.me/ https://cors -anywhere.herokuapp.com / Дополнительные прокси здесь Затем вам нужно вызвать свой API, предварительно добавив один из этих URL-адресов к вашему запросу, например:

https://crossorigin.me/http://yourapi.com https://cors -anywhere.herokuapp.com / http://yourapi.com

Answer 2

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

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