网络错误：req.headers.forEach Apollo Client Angular4

Posted 2023-03-10

【中文标题】网络错误：req.headers.forEach Apollo Client Angular4

【英文标题】：Network Error: req.headers.forEach Apollo Client Angular4

【发布时间】：2018-05-11 07:15:41

【问题描述】：

尝试使用 Apollo 客户端提供的 ApolloClient.Query 调用查询我的 graphql 端点，该端点可通过邮递员调用访问并返回结果。按照文档here 中的指导方针，我应该能够在自定义 Angular 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!')
    );
  

在我的主 app.module.ts 中创建以下 Apollo 客户端

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"
  

【参考方案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()
);  

当然，您可以将 Authorization 交换为 Content-Type 和您想要的任何其他标头。