前言
在前端开发中,跨域请求是一个常见的问题。而 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. 安装
在项目目录下执行以下命令进行安装:
npm install apollo-client-cors-hack --save
2. 引入
在项目的 JavaScript 文件中引入 apollo-client-cors-hack
:
import { createLink } from 'apollo-client-cors-hack';
3. 处理跨域请求
我们可以使用以下代码创建一个新的 ApolloLink
,并将其添加到 Apollo 客户端中:
-- -------------------- ---- ------- ------ - ------------- -------------- -------- - ---- ----------------- ----- -------- - --- ---------- ---- ---------------------------------- --- ----- ------------ - ------------ ---- ------------------------------ ------- ----------------------------- --- ----- ------ - --- -------------- ----- ------------------------------ ------ --- ---------------- ---
corsHackLink
是我们新创建的 ApolloLink
,它通过 createLink
函数创建。参数 url
是跨域请求的代理地址,origin
是请求的源,这里指的是我们的应用地址。将 httpLink
和 corsHackLink
组合在一起,作为 Apollo 客户端的 link
,就可以获取跨域请求的数据了。
总结
通过使用 apollo-client-cors-hack
这个 npm 包,我们可以方便地解决 Apollo GraphQL 数据提供者的 CORS 策略限制问题。不仅如此,createLink
函数的使用方式也为我们提供了跨域请求的一种思路。在实际开发中,还有很多跨域请求的解决方案,需要我们去深入了解和研究。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600559ff81e8991b448d7a86