Как сделать простой запрос GraphQL в JavaScript

Question

Если я выполняю запрос GraphQL, используя node-fetch или curl, я получаю ожидаемые результаты. Например, если у меня есть файл gquery. js со следующим кодом:

const fetch = require("node-fetch")
fetch('https://api.example.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-Api-Service-Key': '123456789077',
  },
  body: JSON.stringify({query: "query($fruitId: String!) { fruit(id: $fruitId) { id, name } }",
  variables: { "fruitId": "ikttwwwbvn7" }})
})
  .then(r => r.json())
  .then(data => console.log('data returned:', data));

И на моей машине с Ubuntu я просто запускаю $node gquery.js, я получаю результат. Я также получу результат, если я использую обычный curl, например:

curl -H 'Content-Type: application/json' -X POST -H "X-Api-Service-Key: 123456789077" https://api.example.com/graphql -d '{ "query": "query($fruitId: String!) { fruit(id: $fruitId) { id, name } }", "variables": { "fruitId": "ikttwwwbvn7" }}'

Однако, если я просто использую fetch на Chrome, например:

fetch('https://api.example.com/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'X-Api-Service-Key': '123456789077',
  },
  body: JSON.stringify({query: "query($fruitId: String!) { fruit(id: $fruitId) { id, name } }",
  variables: { "fruitId": "ikttwwwbvn7" }})
})
  .then(r => r.json())
  .then(data => console.log('data returned:', data));

Я получаю сообщение об ошибке:

Доступ к выборке в 'https://api.example.com/graphql' из источника 'chrome -поиск: // local-ntp' заблокирован согласно политике CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрашиваемом ресурсе отсутствует заголовок «Access-Control-Allow-Origin». Если непрозрачный ответ удовлетворяет вашим потребностям, установите режим запроса «no-cors» для извлечения ресурса с отключенным CORS.

Примечание. Моя конечная точка фактически отличается, но в остальном этот пример по сути так же, как у меня.

Я посмотрел на связанный вопрос , но ответы, похоже, подсказывают, что это не может быть решено только на стороне клиента. Но тот факт, что я могу использовать curl и node, успешно говорит мне о том, что у меня просто нет нужного кода.

Чтобы быть понятным, меня не волнует fetch. Я рад использовать любое автономное решение Javascript, которое не требует использования клиента, такого как apollo или relay.

Answer 1

Невозможно обойти политику того же происхождения , применяемую браузерами. Вы не сталкиваетесь с той же проблемой при отправке запроса через curl или node, потому что политика того же происхождения не применяется в этих контекстах. всегда принудительно применяется в браузере, если вы не явно отключите его . Предотвращение междоменных запросов является мерой безопасности при импорте, поэтому отключать его обычно нежелательно.

Нет ничего волшебного в том, как работают клиенты GraphQL, такие как Apollo. Они все еще используют fetch под капотом. Если вы столкнулись с проблемой CORS, используя fetch, вы бы столкнулись с той же проблемой, используя Apollo или любой другой клиент на основе браузера. Если вы используете автономный клиент, такой как Postman или Altair, вы этого не сделаете, потому что, опять же, вы не имеете дело с браузером.

Как указано в сообщении, на которое вы ссылались, эта проблема должна быть адресовано на стороне сервера. Если вы не отправляете запросы на свой собственный сервер, единственным приемлемым решением является использование прокси. Вы можете использовать существующий или запустить свой собственный.