如何将标头添加到 ionic 4 / Apollo GraphQL App
Posted
技术标签:
【中文标题】如何将标头添加到 ionic 4 / Apollo GraphQL App【英文标题】:how do I add headers to ionic 4 / Apollo GraphQL App 【发布时间】:2019-12-08 08:55:00 【问题描述】:我正在尝试构建一个模块以将 GraphQL 与 ionic 4 一起使用。我已经能够将不安全的 GraphQL 站点导入此 ionic 应用程序。我在将标头导入导出函数 createApollo 时遇到问题。这是我离开的地方。
GraphQL.module.ts
import NgModule from '@angular/core';
import ApolloModule, APOLLO_OPTIONS from 'apollo-angular';
import HttpLinkModule, HttpLink from 'apollo-angular-link-http';
import InMemoryCache from 'apollo-cache-inmemory';
import HttpHeaders from "@angular/common/http";
// const uri = 'https://api.graph.cool/simple/v1/cjv14rb014vcb0108wgqy0zmq';
const uri = 'https://somewhere.com/graphql/mobile';
const headers = new HttpHeaders(
'x-authorization-token': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
'access-control-allow-origin': 'https://app.procuredox.com,https://b2b.procuredox.com',
'access-control-allow-methods': 'GET,POST,OPTIONS',
'access-control-allow-headers': 'Content-Type, X-Authorization-Token, Origin',
'content-type': 'application/json'
);
export function createApollo(httpLink: HttpLink)
return
link: httpLink.create(uri),
cache: new InMemoryCache(),
;
@NgModule(
exports: [ApolloModule, HttpLinkModule],
providers: [
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
,
],
)
export class GraphQLModule
【问题讨论】:
删除你的问题很不爽 这是一个糟糕的问题 【参考方案1】:在浏览了很多论坛和 Apollo Github 项目之后,我发现这是可行的。
import NgModule from '@angular/core';
import ApolloModule, APOLLO_OPTIONS from 'apollo-angular';
import HttpLinkModule, HttpLink from 'apollo-angular-link-http';
import InMemoryCache from 'apollo-cache-inmemory';
import HttpLink as myHttpLink from 'apollo-link-http';
const LINK:myHttpLink = new myHttpLink(
uri: 'https://XXXXXXXXXXXXXXXXXXXXX/graphql/mobile/',
// Additional fetch options like `credentials` or `headers`,
headers:
"Access-Control-Allow-Origin": "https://XXXXXXXXXXXXXXXX",
"Access-Control-Allow-Methods": "GET",
'Access-Control-Allow-Headers': 'application/json',
"Access-Control-Allow-Credentials" : true
,
useGETForQueries: true
);
export function createApollo(httpLink: myHttpLink)
return
link: LINK,
// fetchOptions:
// mode: "no-cors",
// ,
cache: new InMemoryCache(),
;
@NgModule(
exports: [ApolloModule, HttpLinkModule],
providers: [
provide: APOLLO_OPTIONS,
useFactory: createApollo,
deps: [HttpLink],
,
],
)
export class GraphQLModule
【讨论】:
【参考方案2】:尝试在HttpHeaders()
对象上使用.set
方法进行故障排除
let headers = new HttpHeaders()
headers.set('x-authorization-token', 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXX');
headers.set('access-control-allow-origin', 'https://app.procuredox.com,https://b2b.procuredox.com');
headers.set('access-control-allow-methods', 'GET,POST,OPTIONS');
headers.set('access-control-allow-headers', 'Content-Type, X-Authorization-Token, Origin');
headers.set('content-type', 'application/json');
【讨论】:
以上是关于如何将标头添加到 ionic 4 / Apollo GraphQL App的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React 组件中向 Apollo 客户端添加新的授权标头?