如何在JavaScript中实现简单的GraphQL查询

Question

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));

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('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));

我得到一个错误：

CORS策略阻止了在“https://api.example.com/graphql”从来源“chrome-search：//local-ntp”获取：对飞行前请求的响应没有通过访问控制检查：请求的资源上没有“access-control-allog-orgin”标头。如果一个不透明的响应满足您的需要，请将请求的模式设置为“no-cors”，以便在禁用CORS的情况下获取资源。

注意：我的endpoint实际上是不同的，但除此之外，这个示例与我的示例本质上是相同的。

Answer 1

没有办法绕过浏览器强制执行的同源策略。通过curl或node发送请求时不会遇到同样的问题，因为在这些上下文中没有强制执行同源策略。它总是在浏览器中强制执行，除非您显式禁用它。但是，阻止跨域请求是一种导入安全措施，因此禁用它通常是不可取的。

像Apollo这样的GraphQL客户端的工作方式并不神奇。他们仍然在暗中使用fetch。如果您使用fetch处理CORS问题，那么您将使用Apollo或任何其他基于浏览器的客户端处理相同的问题。如果您使用像Postman或Altair这样的独立客户端，那么您不会使用，因为同样，您处理的不是浏览器。

正如您链接的文章中所建议的，这是一个必须在服务器端解决的问题。如果您不向自己的服务器发出请求，唯一可行的解决方案是使用代理。您可以利用现有的一个或运行自己的一个。