npm 包 apollo-client-cors-hack 使用教程

阅读时长 3 分钟读完

前言

在前端开发中,跨域请求是一个常见的问题。而 Apollo GraphQL 是前端领域常见的数据查询工具,如果我们需要在客户端使用 Apollo 调用远程 GraphQL API,必须保证这个 API 支持跨域请求。本教程将介绍如何使用 npm 包 apollo-client-cors-hack 来解决跨域请求问题。

什么是 apollo-client-cors-hack

apollo-client-cors-hack 是一个简单的 Apollo 客户端扩展,可以帮助我们绕过 Apollo GraphQL 数据提供者的 CORS 策略限制。本扩展类似于一个中介代理,将来自 GraphQL 数据提供者的响应通过 CORS 转发到客户端。

如何使用 apollo-client-cors-hack

1. 安装

在项目目录下执行以下命令进行安装:

2. 引入

在项目的 JavaScript 文件中引入 apollo-client-cors-hack

3. 处理跨域请求

我们可以使用以下代码创建一个新的 ApolloLink,并将其添加到 Apollo 客户端中:

-- -------------------- ---- -------
------ - ------------- -------------- -------- - ---- -----------------

----- -------- - --- ----------
  ---- ----------------------------------
---

----- ------------ - ------------
  ---- ------------------------------
  ------- -----------------------------
---

----- ------ - --- --------------
  ----- ------------------------------
  ------ --- ----------------
---

corsHackLink 是我们新创建的 ApolloLink,它通过 createLink 函数创建。参数 url 是跨域请求的代理地址,origin 是请求的源,这里指的是我们的应用地址。将 httpLinkcorsHackLink 组合在一起,作为 Apollo 客户端的 link,就可以获取跨域请求的数据了。

总结

通过使用 apollo-client-cors-hack 这个 npm 包,我们可以方便地解决 Apollo GraphQL 数据提供者的 CORS 策略限制问题。不仅如此,createLink 函数的使用方式也为我们提供了跨域请求的一种思路。在实际开发中,还有很多跨域请求的解决方案,需要我们去深入了解和研究。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600559ff81e8991b448d7a86

纠错
反馈