Javascript 网络错误:req.headers.forEach Apollo客户端Angular4
正在尝试使用Apollo客户端提供的Apollo Client.query调用查询我的graphql端点,该端点可以通过postman调用访问,并返回结果。按照文档中的指导原则,我应该能够在定制的angular 4组件中快速、粗略地执行以下操作:Javascript 网络错误:req.headers.forEach Apollo客户端Angular4,javascript,angular,apollo,apollo-client,Javascript,Angular,Apollo,Apollo Client,正在尝试使用Apollo客户端提供的Apollo Client.query调用查询我的graphql端点,该端点可以通过postman调用访问,并返回结果。按照文档中的指导原则,我应该能够在定制的angular 4组件中快速、粗略地执行以下操作: import { Component } from '@angular/core'; import { AuthService } from '../services/auth.service'; import { User } from '../mo
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)
我也有同样的问题。对我来说,解决这个问题的方法是交换要插入中间件的头,然后将中间件作为concat()结果传递给link
const authMiddleware=new ApolloLink((操作,转发)=>{
//将授权添加到标题中
操作.setContext({
headers:new HttpHeaders().set('Authorization',yourToken)
});
返回向前(操作);
});
...
阿波罗创造({
链接:concat(auth中间件,http),
缓存:新的InMemoryCache()
});
当然,您可能可以交换内容类型和任何其他您想要的头的授权
{
"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"
}
}
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()
});