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

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

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

使用： “ 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(),
});

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

经过测试的变体，可放置标头＃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请求不能具有“ 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(),
   });
   

   1. BAP 已启用，但未实施网站身份验证。当然，在生产模式下，您将需要禁用 BAP ，此处介绍的解决方案还会引起其他问题，因此将来应恢复该解决方案。

如果您看到其他解决方案，请帮助您找到最佳的方法：）