引言
GraphQL 是一种新型的 API 查询语言，它能够大幅度提高应用程序的性能和可扩展性。然而，在实际应用中，GraphQL 也面临一些挑战，其中跨域问题是一个比较棘手的问题。
跨域问题主要是由于安全限制引起的。网络浏览器在访问其他域名下的资源时，会检查 HTTP 头信息中的 Origin 字段，如果请求的域与服务器的域不同，浏览器就会拒绝该请求。这是跨域问题的本质原因。
本文将介绍如何解决 GraphQL 中的跨域问题，并提供详细的示例代码和指导意义。
解决方案
JSONP
JSONP 是一种跨域解决方案，它利用了浏览器允许跨域加载 <script> 标签的特性。但由于 GraphQL 使用了 POST 请求，因此 JSONP 并不适合在 GraphQL 中使用。</p> <h3>CORS</h3> <p>CORS（Cross-Origin Resource Sharing）是一种跨域解决方案，它通过在 HTTP 头中增加一些字段来告诉浏览器，哪些域名是被允许访问的。CORS 是目前跨域问题的标准解决方案，也是 GraphQL 解决跨域问题的最佳方案。</p> <p>在 GraphQL 中启用 CORS 非常简单，只需要在服务器端设置 HTTP 头即可。以下是一个示例代码：</p> <pre class="prettyprint javascript">-- -------------------- ---- ------- ----- ------- - ------------------ ----- ---- - --------------- ----- - ----------- - - -------------------------- ----- ------ - ------------------- ----- --- - --------- --------------- ------------------- ------------- ------- ------- --------- ----- --- ---------------- -------------------- --- ------ ------- -- ------------------------</pre><p>这里使用了 Express 框架和 express-graphql 中间件。cors() 表示启用 CORS，主要实现了响应头的配置。</p> <h3>代理</h3> <p>如果服务器无法启用 CORS，或者由于其他原因无法直接访问 GraphQL API，可以考虑使用代理。代理是一种将请求转发到另一个服务器的方法，可以通过代理服务器来解决跨域问题。</p> <p>以下是一个使用代理的示例代码：</p> <pre class="prettyprint javascript">-- -------------------- ---- ------- ----- ------- - ------------------ ----- - --------------------- - - -------------------------------- ----- --- - --------- ------------------- ----------------------- ------- ------------------------ ------------- ---- --- ---------------- -------------------- --- ----- ------ ------- -- ----------------</pre><p>这里使用了 http-proxy-middleware 中间件，使用 createProxyMiddleware() 方法设置代理服务器。这里将请求转发到 <a href="http://localhost:4000">http://localhost:4000</a> 上，同时设置了 changeOrigin: true，表示修改请求头信息中的 Origin 字段，以避免跨域问题。</p> <h2>总结</h2> <p>本文介绍了如何解决 GraphQL 中的跨域问题，推荐使用 CORS 或代理来解决该问题。需要注意的是，CORS 是目前跨域问题的标准解决方案，也是 GraphQL 解决跨域问题的最佳方案。</p> <p>对于学习 GraphQL 的人来说，这是一个非常实用的技巧，可以帮助他们更好地使用 GraphQL，并开发更高效、更优秀的应用程序。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/65a88184add4f0e0ff1a31e7">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/65a88184add4f0e0ff1a31e7">https://www.javascriptcn.com/post/65a88184add4f0e0ff1a31e7</a></p> </blockquote>