Graphql Apollo 客户端看不到授权标头

Question

我需要使用需要用户基本身份验证的 Graphql 开发服务器。

在前端向受保护的 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(),
});

但我在请求时在浏览器中看不到“授权”标头

您能否支持我将授权标头粘贴到请求中或了解使用默认浏览器身份验证提示的另一种方式。

使用： “阿波罗升压”：“^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(),
});

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

经过测试的变体放置标题 #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(),
});

Answer 1

短：

BAP - 浏览器授权提示

答案：

我做了很多工作，我找到了解决方案：

1. 在后端允许的情况下添加 OPTIONS 请求。 OPTIONS 请求的响应应始终为 200 或 2xx。我们需要从 BAP 检查中排除 OPTIONS 请求，因为根据规范 - OPTIONS 请求不能具有“授权”标头，该标头将始终从请求中删除，如果 BAP 将检查 OPTIONS 请求中所需的“授权”标头，当然它不会被找到。

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(),
   });
   

   1. BAP 已启用，但未实施网站身份验证。当然，在生产模式下，您需要禁用 BAP，这里描述的解决方案会导致另一个问题，因此将来应该恢复此解决方案。

如果您看到其他解决方案，请帮助我找到最好的方法:)