ネットワークエラー：req.headers.forEach Apollo Client Angular4

Question

Apollo Clientが提供するApolloClient.Query呼び出しを使用して結果を返す、郵便料金の呼び出しでアクセス可能なGraphqlエンドポイントに問い合わせを試みています。私のメインapp.module.ts

で、次のアポロクライアントの作成に

import { Component } from '@angular/core'; 
import { AuthService } from '../services/auth.service'; 
import { User } from '../models/user'; 

import { Apollo } from 'apollo-angular'; 

import gql from 'graphql-tag'; 

@Component({ 
    selector: 'app-login', 
    templateUrl: './login.component.html', 
    styleUrls: ['./login.component.css'] 
}) 
export class LoginComponent { 
    user: User = new User(); 
    constructor(private auth: AuthService, private apollo: Apollo) {} 
    onLogin(): void { 

    this.apollo.query({ 
     context: { 
     headers: { 
      'Content-Type': 'application/json', 
      'Accept': 'application/json', 
     }, 
     opts: { 

      mode: 'no-cors', 
     } 
     }, 
     query: gql`{ 
    allUsers { 
    id 
    emailAddress 
    password 
    } 
}`}).subscribe(
     (response) => console.log(response), 
     (error) => console.log(error), 
    () => console.log('completed!') 
    ); 
    } 
} 

：ドキュメントhereからのガイドラインに続いて、私は、カスタムの角度4コンポーネントに迅速かつ以下のような、粗な何かを行うことができるはず

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import {HttpClientModule} from '@angular/common/http'; 
import { FormsModule } from '@angular/forms'; 


import { AppComponent } from './app.component'; 
import { HeaderComponent } from './header/header.component'; 
import { LoginComponent } from './login/login.component'; 
import { AuthService } from './services/auth.service'; 
import { RegisterComponent } from './register/register.component'; 
import { StatusComponent } from './status/status.component'; 

import { ApolloModule, Apollo } from 'apollo-angular'; 
import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http'; 
import { InMemoryCache } from 'apollo-cache-inmemory'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeaderComponent, 
    LoginComponent, 
    RegisterComponent, 
    StatusComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpClientModule, 
    FormsModule, 
    ApolloModule, 
    HttpLinkModule, 
    RouterModule.forRoot([ 
     { path: 'login', component: LoginComponent }, 
     { path: 'register', component: RegisterComponent }, 
     { path: 'status', component: StatusComponent } 
    ]) 

    ], 
    providers: [AuthService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 

    constructor(
    apollo: Apollo, 
    httpLink: HttpLink 
) { 
    apollo.create({ 
     link: httpLink.create({ withCredentials: false, 
     uri: 'http://localhost:8080/graphql'}), 
     cache: new InMemoryCache() 
    }); 
    } 
} 

ただし、デバッグコンソールで次のエラーが表示されます。思考？下のスクロールは私のjavascriptライブラリのバージョン管理

Error: Network error: req.headers.forEach is not a function 
    at new ApolloError (ApolloError.js:34) 
    at QueryManager.js:277 
    at QueryManager.js:655 
    at Array.forEach (<anonymous>) 
    at QueryManager.js:654 
    at Map.forEach (<anonymous>) 
    at QueryManager.webpackJsonp.../../../../apollo-client/core/QueryManager.js.QueryManager.broadcastQueries (QueryManager.js:649) 
    at QueryManager.js:226 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:392) 

package.json

{ 
    "name": "frontend", 
    "version": "0.0.0", 
    "license": "MIT", 
    "scripts": { 
    "ng": "ng", 
    "start": "ng serve", 
    "build": "ng build", 
    "test": "ng test", 
    "lint": "ng lint", 
    "e2e": "ng e2e" 
    }, 
    "private": true, 
    "dependencies": { 
    "@angular/animations": "^4.0.0", 
    "@angular/common": "^4.0.0", 
    "@angular/compiler": "^4.0.0", 
    "@angular/core": "^4.0.0", 
    "@angular/forms": "^4.0.0", 
    "@angular/http": "^4.0.0", 
    "@angular/platform-browser": "^4.0.0", 
    "@angular/platform-browser-dynamic": "^4.0.0", 
    "@angular/router": "^4.0.0", 
    "apollo-angular": "^1.0.0", 
    "apollo-angular-link-http": "^1.0.1", 
    "apollo-cache-inmemory": "^1.1.1", 
    "apollo-client": "^2.0.3", 
    "core-js": "^2.4.1", 
    "graphql": "^0.11.7", 
    "graphql-tag": "^2.5.0", 
    "rxjs": "^5.4.1", 
    "zone.js": "^0.8.14" 
    }, 
    "devDependencies": { 
    "@angular/cli": "1.2.3", 
    "@angular/compiler-cli": "^4.0.0", 
    "@angular/language-service": "^4.0.0", 
    "@types/jasmine": "~2.5.53", 
    "@types/jasminewd2": "~2.0.2", 
    "@types/node": "~6.0.60", 
    "codelyzer": "~3.0.1", 
    "jasmine-core": "~2.6.2", 
    "jasmine-spec-reporter": "~4.1.0", 
    "karma": "~1.7.0", 
    "karma-chrome-launcher": "~2.1.1", 
    "karma-cli": "~1.0.1", 
    "karma-coverage-istanbul-reporter": "^1.2.1", 
    "karma-jasmine": "~1.1.0", 
    "karma-jasmine-html-reporter": "^0.2.2", 
    "protractor": "~5.1.2", 
    "ts-node": "~3.0.4", 
    "tslint": "~5.3.2", 
    "typescript": "~2.3.3" 
    } 
} 

Answer 1

を見るために、私は同じ問題を抱えていました。私のために解決したのは、代わりにミドルウェアに挿入されるヘッダーをスワップし、次にミドルウェアをconcat（）の結果としてリンクに渡すことでした。もちろん

https://www.apollographql.com/docs/angular/basics/network-layer.html

const authMiddleware = new ApolloLink((operation, forward) => { 
    // add the authorization to the headers 
    operation.setContext({ 
     headers: new HttpHeaders().set('Authorization', yourToken) 
    }); 

    return forward(operation); 
}); 

... <other code> 

apollo.create({ 
    link: concat(authMiddleware, http), 
    cache: new InMemoryCache() 
}); 

、おそらくのContent-Typeとしたい任意の他のヘッダの認可を交換することができます。