Angular 5 Http Post Request

Question

Я пытаюсь создать приложение, используя Angular 5 через Webstorm. Я настроил свои услуги на серверной части. Когда я пытаюсь получить данные от почтальона или из клиентского инструмента Rest, который Webstorm обеспечивает все в порядке.

Но когда я пытаюсь получить данные из моего фактического кода машинописного текста, говорит

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. 

У меня есть добавленные заголовки в бэкэнде на моем Java-сервисе. такие как

        response.addHeader("Access-Control-Allow-Origin", "*"); 
        response.addHeader("Access-Control-Allow-Credentials", "true");
        response.addHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT, OPTIONS, HEAD");
        response.addHeader("Access-Control-Allow-Headers", "Content-Type, Accept, X-Requested-With");

Моя функция в классе экспорта ниже

      constructor(private http: HttpClient) { }




  login(username: string, password: string) {
    console.log(username + '' + password);
    const headers = new HttpHeaders().append('Content-Type', 'application/json')
    const url  = 'http://localhost:8080/../UserLogin';



    return this.http.post(url, {'username': username, 'password': password}  )
      .subscribe(
      (data: any) => {
        console.log(data);

      }
    );

  }

Когда я проверяю заголовки запроса от сетевой сессии chrome я вижу, что метод запроса - варианты, и нигде нет данные запроса.

Я смущен тем, почему почтальон и остальные клиенты webstrom беги приятно вместо моей функции и второй про запрос метод, который конвертирует из поста в опции

Любая помощь будет признательна.

Answer 1

Фактическая проблема заключается в том, как Chrome оценивает операции CORS.

Я нахожу этот ответ из относительного поста, который действительно помогает мне

В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin»

Если вы установите это расширение, все вернется в нормальное состояние:

Расширение Chrome

3 потраченных впустую часа на расширение: P

Answer 2

Вам необходимо добавить { withCredentials: true } в качестве третьего параметра вашего сообщения.

return this.http.post(
    url,
    {'username': username, 'password': password},
    { withCredentials: true }
  )
  .subscribe(
    (data: any) => {
      console.log(data);
    }
  );