[英]Graphql Apollo Client can't see Authorization header
I need to work with Graphql development server which requires from user Basic authentication. 我需要使用需要用户基本身份验证的Graphql开发服务器。
On frontend side to make requests to protected graphql service I wrote next code
在前端,向受保护的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(),
});
But I can't see "Authorization" header in the browser while request 但是请求时我无法在浏览器中看到“授权”标头
Could you please support me to paste Authorization header to the request or understand another way to work with Default Browser Authentication Prompt. 您能否支持我将“授权”标头粘贴到请求中,或者了解使用“默认浏览器身份验证提示”的另一种方法。
using: "apollo-boost": "^0.1.22", "apollo-link-context": "^1.0.12", 使用:“ apollo-boost”:“ ^ 0.1.22”,“ apollo-link-context”:“ ^ 1.0.12”,
============================================= =============================================
============================================= =============================================
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(),
});
============================================= =============================================
============================================= =============================================
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(),
});
============================================= =============================================
============================================= =============================================
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(),
});
BAP - BROWSER AUTH PROMPT BAP-浏览器授权提示
I worked around a lot and I found a solution: 我做了很多工作,然后找到了解决方案:
And I have created apollo-client in this way 我以这种方式创建了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(), });
If you see another solution please help mу to find the best way of doing :) 如果您看到其他解决方案,请帮助您找到最佳的方法:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.