네트워크 오류 : req.headers.forEach Apollo 클라이언트 각도 4

아폴로 클라이언트가 제공 한 ApolloClient.Query 호출을 사용하여 우편 발송자 호출로 액세스 할 수있는 내 Graphql 끝점을 쿼리하고 결과를 반환하려고합니다. 내 주요 app.module.ts네트워크 오류 : req.headers.forEach Apollo 클라이언트 각도 4

을에

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() 
    }); 
    } 
}

그러나 디버그 콘솔에서 다음 오류가 발생합니다. 생각? 내 자바 스크립트 라이브러리의 버전

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" 
    } 
}

출처

2017-11-27 user1013905

저도 같은 문제를 겪고을 보려면 아래로 스크롤합니다. 이를 해결하기 위해 헤더를 대신해서 미들웨어에 삽입 한 다음 미들웨어를 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을 원하는 다른 헤더 인증을 교환 할 수 있습니다.

출처

2017-12-04 21:45:16 harmonickey

네트워크 오류 : req.headers.forEach Apollo 클라이언트 각도 4

답변

관련 문제