什么是跨域请求？
在浏览器中，同源策略（Same-Origin Policy）是一种安全机制，它限制了一个网页中的 JavaScript 脚本对另一个来源的文档或脚本进行操作。同一来源的脚本之间可以自由交互，但是不同来源的脚本只能受到非常有限的交互。如果 JavaScript 代码访问来自另一个域的数据，则称为跨域请求。
为什么 GraphQL 会出现跨域问题？
GraphQL 通常通过 HTTP 协议来传输请求和响应，因此所有与 HTTP 协议有关的跨域问题都会影响 GraphQL。当浏览器中的 JavaScript 脚本尝试与 GraphQL 服务进行通信时，由于 GraphQL 服务和浏览器中的脚本不属于同一个域，因此将出现跨域请求的问题。
如何解决 GraphQL 跨域请求？
一种解决 GraphQL 跨域问题的方法是设置 CORS（Cross-Origin Resource Sharing）头。CORS 允许服务器声明哪些外部源可以访问其资源。可以指定任意数量的域，或使用万能 * 通配符，允许所有来源访问。
对于 GraphQL，需要在服务器上设置 Access-Control-Allow-Origin 头，并设置其值为允许访问数据的来源 URL。如果您不想在服务器上进行这些更改，则可以使用代理服务器。代理服务器可以将所有请求转发到 GraphQL 服务，并设置正确的响应头以解决跨域请求问题。
下面是一个使用代理服务器解决 GraphQL 跨域请求的示例代码：
-- -------------------- ---- -------
----- ----- - ---------------------------------
-------------- - ------------- -
--------
-----------
-------
------- ------------------------
------------- -----
--
--
--在此示例中，'/graphql' 是客户端使用的 GraphQL 端点，'http://localhost:4000' 是 GraphQL 服务的地址。changeOrigin 表示是否更改请求头的原始操作。更改原始操作包括将主机标头设置为目标 URL 的主机名，设置来源头为源 URL，设置反向代理所需的其他标头。如果目标 URL 未提供协议，则请求将使用 HTTP 协议。
总结
跨域请求是浏览器安全性的基础，但当服务端使用 GraphQL 作为数据管理工具时，它也会面临跨域请求的问题。在 GraphQL 中解决跨域请求的方法是设置 CORS 头，或使用代理服务器将请求转发到 GraphQL 服务。通过这两种方法之一，GraphQL 服务可以更安全地与外部请求交互，让应用程序更加健壮和稳定。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf8402b5eee0b5256c7a05