Graphql Apollo Client не видит заголовок авторизации - PullRequest
Новая
       11

Graphql Apollo Client не видит заголовок авторизации

0 голосов
/ 07 февраля 2019

Мне нужно работать с сервером разработки Graphql, который требует от пользователя базовой аутентификации.

enter image description here На стороне внешнего интерфейса для отправки запросов к защищенному сервису graphql я написал следующий код 

const authLink = setContext((_, { headers }) => {
   return {
      headers: {
         ...headers,
         Authorization: 'Basic ' + btoa('<login>:<pass>'),
      }
   }
});

const httpLink = new HttpLink({
   uri: process.env.REACT_APP_GQL_SERVER,
   fetchOptions: {
      mode: 'no-cors'
   }
});

const client = new ApolloClient({
   link: authLink.concat(httpLink),
   cache: new InMemoryCache(),
});

Но я не вижу заголовка «Авторизация» в браузере при запросе enter image description here

Не могли бы вы мне помочь вставить заголовок авторизации в запрос или понятьдругой способ работы с приглашением для проверки подлинности браузера по умолчанию.

с использованием: "apollo-boost": "^ 0.1.22", "apollo-link-context": "^ 1.0.12",

=============================================

Протестированный вариант для размещения заголовка # 1

============================================ 

const httpLink = createHttpLink({
   uri: process.env.REACT_APP_GQL_SERVER,
   fetchOptions: {
      mode: 'no-cors'
   },
});

const middlewareLink = new ApolloLink((operation, forward: any) => {
  operation.setContext({
    headers: {
      "Authorization": 'Basic ' + btoa('<login>:<password>')
    }
  });
  return forward(operation);
});

const client = new ApolloClient({
   link: middlewareLink.concat(httpLink),
   cache: new InMemoryCache(),
});

=============================================

Протестированный вариант для размещения заголовка # 2

============================================= 

const authLink = setContext((_, { headers }) => {
  return {
    headers: {
      ...headers,
      authorization: 'Basic ' + btoa('<login>:<password>'),
    }
  }
});

const httpLink = new HttpLink({
   uri: process.env.REACT_APP_GQL_SERVER,
   fetchOptions: {
      mode: 'no-cors'
   }
});

const links: any = [];
links.push(httpLink);
links.push(authLink);

const client = new ApolloClient({
   link: ApolloLink.from(links),
   cache: new InMemoryCache(),
});

============================================= * 10= *===

Протестированный вариант для размещения заголовка # 3

==================================================

const middlewareLink = new ApolloLink((operation, forward: any) => {
  operation.setContext({
    headers: {
      authorization: 'Basic ' + btoa('<login>:<password>')
    }
  });
  return forward(operation);
});


const httpLink = new HttpLink({
   uri: process.env.REACT_APP_GQL_SERVER,
   fetchOptions: {
      mode: 'no-cors'
   }
});

const links: any = [];
links.push(httpLink);
links.push(middlewareLink);

const client = new ApolloClient({
   link: ApolloLink.from(links),
   cache: new InMemoryCache(),
});

1 Ответ

0 голосов
/ 11 февраля 2019

Короткость:

BAP - ЗАДАНИЕ АВТОРА БРАУЗЕРА

Ответ:

Я много работал и нашел решение:

  1. Добавить запрос OPTIONS, разрешенный для бэкэнда.Ответ на запрос OPTIONS должен быть всегда 200 или 2xx.Нам нужно исключить запрос OPTIONS из проверки BAP , поскольку по спецификации - в запросе OPTIONS не может быть заголовка «Authorization», этот заголовок всегда будет удаляться из запроса, и если BAP будет проверять требуемыйЗаголовок «Авторизация» в запросе ОПЦИИ конечно не будет найден.

  2. И я создал Apollo-Client таким образом 

    import gql from 'graphql-tag';
import { ApolloClient, ApolloLink, HttpLink, InMemoryCache, FetchPolicy } from 'apollo-boost';
import { onError } from 'apollo-link-error';

const errorLink = onError(({ graphQLErrors, networkError }) => {
   if (graphQLErrors) {
      graphQLErrors.map(({ message, locations, path }) =>
         console.error(
            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
         ),
      );
   }
   if (networkError) {
      logger.error(`[Network error]: ${networkError}`);
   }
});

const links: any = [];
links.push(errorLink);
links.push(
   new HttpLink({
      uri: process.env.REACT_APP_GQL_SERVER,
      headers: {
         authorization: 'Basic ' + btoa('<login>:<password>')
      },
   }),
);

const client = new ApolloClient({
   link: ApolloLink.from(links),
   cache: new InMemoryCache(),
});
  3. BAP был включен, пока не была выполнена аутентификация веб-сайта.Конечно, в производственном режиме вам нужно будет отключить BAP , и решение, описанное здесь, вызовет другие проблемы, поэтому в будущем это решение должно быть отменено.

Если вы видите другое решение, пожалуйста, помогите мне найти лучший способ сделать:)

...