Я разрабатываю расширение Chrome, которое отправляет существующие запросы GraphQL на сайт.
Тестируя расширение Apollo Chrome, мне удалось правильно отправить запрос.
Но когда я делаю это через свой сценарий, я получаю ошибку аутентификации: «Пользователь не является администратором рабочей области».
Мой запрос вызывается из chrome.scripting.executeScript и ограничивается:
const doSomething = async () => {
const query = JSON.stringify({
query: `MY QUERY`
});
const response = await fetch(TARGET_URL, {
headers: { 'content-type': 'application/json' },
method: 'POST',
body: query,
});
const responseJson = await response.json();
console.info(responseJson);
return responseJson.data;
};
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.scripting.executeScript({
target: { tabId: tabs[0].id },
func: doSomething
}, (result) => {
console.info(result[0].result);
});
});
const responseJson = await response.json();
console.info(responseJson);
Я думаю, что мне не хватает этапа аутентификации, но я не понимаю, почему у меня есть разница между расширением Apollo и моим.
Как Аполлону удается выполнить свою просьбу? Как я могу обновить свой сценарий, чтобы добиться чего-то подобного?
🤔 А знаете ли вы, что...
С помощью JavaScript можно валидировать данные на стороне клиента, что улучшает пользовательский опыт.
Как упомянул @phry, мы отправляем запрос через ваш экземпляр клиента Apollo, обнаруженный расширением Chrome (независимо от того, установлено ли значение window.__APOLLO_CLIENT__). Это означает, что запрос также пройдет через вашу цепочку ссылок , которая может включать некоторую логику для прикрепления заголовков аутентификации к запросу.
Глядя на ваш пример кода, я не вижу никакой дополнительной информации заголовка в вашем запросе fetch, поэтому этот запрос, скорее всего, не аутентифицируется таким же образом. Если вы хотите проверить, что отправляет экземпляр клиента Apollo вашего приложения, вы можете переопределить функцию выборки на HttpLink и зарегистрировать запрос.
createHttpLink({
fetch: (uri, options) => {
console.info(uri, options)
return window.fetch(uri, options);
}
})
// or if you use the constructor to create the link
new HttpLink({
fetch: (uri, options) => {
console.info(uri, options)
return window.fetch(uri, options);
}
})
Просто убедитесь, что функция fetch в вашем скрипте включает все необходимые заголовки аутентификации, которые вы видите здесь. Надеюсь это поможет!