GraphQL 是一种用于 API 开发的查询语言和运行时环境。它可以让客户端根据需要指定需要的数据，从而避免不必要的数据传输和处理。然而，当我们在不同的域名或端口上使用 GraphQL 服务器时，可能会遇到跨域请求的问题。本文将介绍如何在 GraphQL 服务器上执行跨域请求。
什么是跨域请求？
跨域请求是指在一个域名下的网页通过 AJAX 等方式向另一个域名下的服务器请求数据，这种情况下浏览器会阻止跨域请求，以保护用户的安全。在 GraphQL 服务器上，如果客户端和服务器不在同一个域名或端口上，就会发生跨域请求的问题。
如何解决跨域请求？
1. 使用 CORS
CORS 是一种基于 HTTP 头部的机制，可以让 Web 应用服务器给跨域访问的网页提供访问权限。在 GraphQL 服务器上，我们可以通过设置 HTTP 响应头来允许跨域请求。下面是一个使用 Express 框架的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ----------- - --------------------------- ----- ---- - ---------------- ----- ------ - -------------------- ----- --- - ---------- ---------------- -- ------ ------------------- ------------- ------- ------- --------- ---- ---- ---------------- -- -- - -------------------- ------ -- ------- -- ---- ------- ---
在上面的代码中，我们使用了 cors 中间件来允许跨域请求。这样客户端就可以从不同的域名或端口上访问 GraphQL 服务器了。
2. 使用 JSONP
JSONP 是一种跨域请求的解决方案，它利用了 <script> 标签没有跨域限制的特性。在 GraphQL 服务器上，我们可以将查询语句包装成一个 JavaScript 函数，并将函数名作为参数传递给服务器。服务器在返回数据时，将数据包装成函数调用的形式返回给客户端。客户端就可以通过回调函数来获取数据了。下面是一个使用 jQuery 的示例代码：
-- -------------------- ---- -------
--------
---- -------------------------------------------------
--------- --------
----- -
------ -
-
-----
-
-
-
---
-------- ------------- -
-----------------------------
-在上面的代码中，我们使用了 jQuery 的 $.ajax 方法来发送 JSONP 请求。我们将 GraphQL 查询语句作为 data 参数传递给服务器，并在 url 参数中传递了回调函数名 getData。服务器在返回数据时，会将数据包装成 getData 函数调用的形式返回给客户端。客户端就可以通过回调函数来获取数据了。
总结
在 GraphQL 服务器上执行跨域请求，我们可以使用 CORS 或 JSONP 这两种解决方案。CORS 是一种基于 HTTP 头部的机制，可以让 Web 应用服务器给跨域访问的网页提供访问权限。JSONP 利用了 <script> 标签没有跨域限制的特性，将查询语句包装成一个 JavaScript 函数，并将函数名作为参数传递给服务器，在返回数据时，将数据包装成函数调用的形式返回给客户端。这两种解决方案都可以有效地解决 GraphQL 服务器上的跨域请求问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662a96efd3423812e47fad14