Угловые заголовки http.get не распознаются - PullRequest
2 голосов
/ 20 марта 2019

Я создаю угловое приложение, которое отправляет запрос get на сервер через REST API.URL-адрес занимает несколько заголовков и возвращает необходимые данные, и был успешно протестирован на PostMan.Вот снимок экрана, показывающий заголовки, необходимые для сервера:

Post Man image

Я пытаюсь создать функцию, используя http.get для получения этих записейв моем приложении.Я создал службу с именем listService, которая будет принимать имя модуля и подготавливать объект заголовка.Затем служба вызовет adapterService (содержащий мою функцию get), которая подготовит заголовки и отправит запрос на сервер.К сожалению, вместо получения правильного ответа я получаю следующую ошибку:

"SyntaxError: неожиданный токен <в JSON в позиции 0 в JSON.parse () в XMLHttpRequest.onLoad (<a href="http://localhost:4200/vendor.js:13170:51" rel="nofollow noreferrer">http://localhost:4200/vendor.js:13170:51)в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2743:31) в Object.onInvokeTask (http://localhost:4200/vendor.js:42628:33) в ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:2742:36) в Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask (http://localhost:4200/polyfills.js:2510:47) в ZoneTask.push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.js:2818:34) в invokeTask (http://localhost:4200/polyfills.js:3862:14) в XMLHttpRequest.globalZoneAwareCallback (* 1032)*

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

 Wed Mar 20 11:37:43 2019 [21570][-none-][FATAL] Array
(
    [Host] => localhost
    [Connection] => keep-alive
    [Accept] => application/json, text/plain, */*
    [Origin] => http://evil.com/
    [User-Agent] => Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36
    [Referer] => http://localhost:4200/profile
    [Accept-Encoding] => gzip, deflate, br
    [Accept-Language] => en-US,en;q=0.9
    [If-None-Match] => d41d8cd98f00b204e9800998ecf8427e
)

Данные, которые я отправляю, даже не добавляются в заголовки!Я не уверен, почему это происходит. Я проверил документы, чтобы увидеть, если я добавляю http headers неправильный путь, и имеюконсоль вошла в разные точки и все вроде нормально до звонка на http.get.Я действительно не понимаю, что здесь происходит.

Вот мой код:

listService

import { Injectable } from '@angular/core';
import { JwtService } from 'src/app/services/jwt/jwt.service';
import { AdapterService } from 'src/app/services/adapter/adapter.service';
import { environment } from 'src/environments/environment';
import { NGXLogger } from 'ngx-logger';
import { Observable } from 'rxjs';
import { ToastrService } from 'ngx-toastr';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';

/**
* This property contains the attributes of the environment configuration.
*/
const API = environment.api;

@Injectable({
  providedIn: 'root'
})
export class ListService {

  /**
  * Constructor to initialize the jwt service, adapter service, logger and translation pipe
  */
  constructor(private adapter: AdapterService,
    private jwt: JwtService,
    private translate: TranslatePipe,
    private logger: NGXLogger,
    private toaster: ToastrService) { }

  /**
   * This method initialzes the parameters for the the Get call.
   *
   * @param  username
   * @param  password
   * @return
   */
  initializeParameters(module: string): any {
    let token = this.jwt.getToken();
    let params = {
      "module": module,
      "platform": API.platform,
      "oauth_token": token
    };
    return params;
  }

  /**
  * This method sends request for listing relevant data from module
  */
  listData(module: string) {
    let params = this.initializeParameters(module);
    this.adapter.get('customPortalApi/listRecords', params)
      .subscribe(
        response => {
          this.logger.warn(response);
        },
        error => {
          let errmsg = this.translate.transform("pages[login_page][responses][error][" + error.error + "]");
          this.toaster.error(errmsg); console.log(error);
        }
      )
  }
}

adapterService (headerи получить функции)

private requestHeaders(path: string, headerData: any) {
    let headers;
    if (path !== 'customPortalApi/customToken') {
        headers = new HttpHeaders();
        for(let key in headerData){
          let value = headerData[key];
          headers = headers.append(key, value);
        }
      }
        return headers;
    }

  /**
   * This method generates the GET api call.
   *
   * @param path
   * @param params
   * @method get
   * @return
   */
    get(path: string, data: any, params: HttpParams = new HttpParams()): Observable < any > {
    let headers = this.requestHeaders(path, data); 
    return this.http.get(`${API_URL}${path}`, headers)
            .pipe(catchError(this.formatErrors));
    }

фиктивный компонент (для вызова)

import { Component, OnInit } from '@angular/core';
import {ListService} from 'src/app/services/list/list.service';

/**
* This component is for testing
*/
@Component({
  selector: 'app-dummy',
  templateUrl: './dummy.component.html',
  styleUrls: ['./dummy.component.scss']
})
export class DummyComponent implements OnInit{
  constructor(private list: ListService){}

  ngOnInit(){
    this.list.listData("accounts");
  }
}

РЕДАКТИРОВАТЬ для всех, кто хочет получитьпредставление о том, как выглядит объект заголовка перед вызовом http.get:

picture

Другое правка Может ли это бытьчто CORS может быть причиной проблемы?Я установил Access-Control-Allow-Origin на «*».Вот моя сетевая активность после внесения предложенных мной изменений:

result

Служба REST работает, но она не перенаправляет меня на мой API

Заголовки, которые регистрируются на сервере при отправке через почтальона:

Wed Mar 20 12:52:50 2019 [21570][1][FATAL] Array
(
    [Host] => localhost
    [Connection] => keep-alive
    [module] => Accounts
    [Cache-Control] => no-cache
    [oauth_token] => 9efe19d4d2ec3b557b4d0588a3f74d5d3cc0ed46
    [platform] => base
    [User-Agent] => Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36
    [Postman-Token] => 3ddc88e1-e7a8-700f-580b-801da5f0adde
    [Accept] => */*
    [Accept-Encoding] => gzip, deflate, br
    [Accept-Language] => en-US,en;q=0.9
    [Cookie] => download_token_base=e790d5a8-17a4-4110-98ab-a6648a0ef385
)

И эти работают нормально

1 Ответ

1 голос
/ 20 марта 2019
get(path: string, data: any, params: HttpParams = new HttpParams()): Observable < any > {
let httpOptions ={headers: this.requestHeaders(path, data)}; 
return this.http.get(`${API_URL}${path}`, httpOptions)
        .pipe(catchError(this.formatErrors));
}

Попробуй вот так. Вам необходимо передать объект опции, который содержит свойство headers.

https://angular.io/guide/http#adding-headers

...