如何将标头添加到 ionic 4 / Apollo GraphQL App答案

【问题标题】：how do I add headers to ionic 4 / Apollo GraphQL App如何将标头添加到 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 {}

【问题讨论】：

删除你的问题很不爽
这是一个糟糕的问题

标签： graphql ionic4 apollo

【解决方案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');

【讨论】：