different header

mohammad mahmoodi

unread,

Sep 18, 2017, 4:43:32 AM9/18/17

to Angular and AngularJS discussion

hi guys

i use paginate gem on ruby on rails this gem set X-Total-page and link on header ! i can see this varables on postman application but on angular i cant see this varables and on call variable console return null !

api service

export class TehranjsApiService {
  BASE_URL="http://localhost:3000/api/v1";
  constructor(private http: Http) { }
  getHeader = () => {
        let headers = new Headers();
        headers.append("Content-Type", 'application/json');

        return headers;
    };
   

    getArticles(limit:number=10) : any {
        return this.http.get(`${this.BASE_URL}/articles.json?limit=${limit}`,this.getHeader)
          .map((response: Response) => {
            // some response manipulation

            return response
          })
          .toPromise();
      }

and home component

import { Component, OnInit } from '@angular/core';
import { TehranjsApiService } from '../../../../shared/shared';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  articles: any;
  constructor(public tJs: TehranjsApiService) { }

  ngOnInit() {

    this.tJs.getArticles().then(
        data => { this.articles= data.json().articles; console.log(data.headers.get('link'))} , //success
        error => console.log('error', error),
        () => {console.log('call finished')}
    )



  }

}

link return null but i can see this on postman :(

Sander Elias

unread,

Sep 18, 2017, 4:51:21 AM9/18/17

to Angular and AngularJS discussion

Hi Mohammad,

I suspect a CORS issue. This is something you have to arrange for on your server: https://enable-cors.org/index.html

(Postman doesn't need that, but a browser does!)

Regards

Sander

mohammad mahmoodi

unread,

Sep 18, 2017, 5:47:16 AM9/18/17

to Angular and AngularJS discussion

hi Sander

you sure ? i haven't any error on console about CORS issue ! Usually google chrome loged CORS problem on inspect element

and i added this to index.html

<!doctype html>
<html dir="rtl">
<head>
  <meta charset="utf-8">
  <title>front</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://cdn.rawgit.com/rastikerdar/shabnam-font/v1.1.0/dist/font-face.css" rel="stylesheet" type="text/css" />
  <script src="assets/js/pub.js"></script>

  <meta http-equiv="Content-Security-Policy"
  content="default-src *;
       script-src 'self' 'unsafe-inline' 'unsafe-eval'
                   127.0.0.1:*
                   http://localhost:*
                   http://*.google.com
                   http://*.gstatic.com
                   http://*.googleapis.com
                   http://*.firebaseio.com
                   https://*.google.com
                   https://*.gstatic.com
                   https://*.googleapis.com
                   https://*.firebaseio.com
                   https://*.pinsood.com
                   https://pinsood.com
                   http://lorempixel.com
                   ;
                   img-src * data:;
       style-src  'self' 'unsafe-inline'
                  127.0.0.1
                  http://localhost
                   https://*.pinsood.com
                   http://*.google.com
                   http://*.gstatic.com
                   http://*.googleapis.com
                   http://*.firebaseio.com
                   https://*.google.com
                   https://*.gstatic.com
                   https://*.googleapis.com
                   https://*.firebaseio.com
                   http://*.lorempixel.com
">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

Sander Elias

unread,

Sep 18, 2017, 6:04:48 AM9/18/17

to Angular and AngularJS discussion

H Mohammad,

For test, replace this:

return this.http.get(`${this.BASE_URL}/articles.json?limit=${limit}`,this.getHeader)
 .map((response: Response) => {

with:

return this.http.get(`${this.BASE_URL}/articles.json?limit=${limit}`,this.getHeader)


          .do((r:response)=> console.log('ok',r.json())
          .catch(err => {console.error(err); throw new Error(err)})
          .map((response: Response) => {

It will log out both, success and failure path.

Regards

Sander

mohammad mahmoodi

unread,

Sep 18, 2017, 6:34:58 AM9/18/17

to Angular and AngularJS discussion

i think we should not convert response to json because remove header values

Sander Elias

unread,

Sep 18, 2017, 7:33:14 AM9/18/17

to Angular and AngularJS discussion

H Mohammad,

You are converting to JSON twice. Drop one of those, and, probably it will work. The http gets the data just fine. Also, drop the .toPromise, and just use the observable.