前言
在Web开发中，我们常常会遇到 AJAX 调用其他域的 API 的时候出现 Access-Control-Allow-Origin 的问题，这是由于浏览器出于安全考虑，限制了HTTP请求跨域访问的权限。在本文中，我们将探讨如何通过 GraphQL 和 CORS（跨域资源共享）来解决该问题。
GraphQL 简介
GraphQL 是一种新型的 API 查询语言，用于构建客户端应用程序。它允许客户端请求所需的数据而不会获得不必要的数据，因此显著提高了应用程序的性能。 GraphQL 被 Facebook 开发并开源。
GraphQL 有三个主要的互动类型：
- 查询（Query）：用于获取相关数据。
- 变化（Mutation）：用于更改现有数据的值。
- 订阅（Subscription）：向用户推送远程服务器上的特定变化。
GraphQL 构建在强类型系统的基础上，使得 API 的语法变得简单且一致。这使得任何客户端都可以使用相同的查询语言来请求服务器提供的任何信息，这不仅减少了应用程序的工作量，还保证了 API 上没有任何不必要的复杂性。
跨域资源共享（CORS）介绍
CORS（Cross-Origin Resource Sharing）是一种浏览器技术，它允许 web 应用程序从其他域请求资源。它是由 W3C 定义的标准，跨域资源共享（CORS）规范允许 JavaScript 发起 HTTP 请求与其源不同的外部站点。
CORS 的三种类型：
- 简单请求
- 非简单请求
- 预检请求
GraphQL 解决跨域问题
由于 GraphQL 服务器上存在单一的入口点，因此可以轻松地与 CORS 配合使用，以防范跨域攻击，同时也可以使 API 更加安全，并简化了代码。
使用 CORS 跨域
某些服务器拒绝跨域请求是不可避免的，因此建议使用 CORS 跨域方案。我们可以使用以下 PHP 代码在我们的服务器上启用 CORS：
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");这个代码段的作用是：
Access-Control-Allow-Origin: *允许从所有域请求资源。Access-Control-Allow-Headers: *允许使用哪些 HTTP 头信息。
我们在后续调用 GraphQL 服务器的时候，需要在请求头信息中设置如下：
'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*',
GraphQL 解决跨域问题
GraphQL 服务器端和客户端都可以使用 CORS 来解决跨域问题。我们可以在 GraphQL 服务器端使用 CORS 中间件来配置。
以下是终端命令，使用 cors 中间件：
npm install cors
以下是使用 Node.js 和 Express 搭建 GraphQL 服务器的示例代码：
-- -------------------- ---- -------
--- ------- - -------------------
--- ----------- - ---------------------------
--- - ----------- - - -------------------
--- ---- - ----------------
--- ------ - -------------
---- ----- -
------ ------
-
---
--- ---- - - ------ -- -- ------ ------- --
--- --- - ----------
----------------
------------------- -------------
------- -------
---------- -----
--------- -----
----
---------------- -- -- ---------------- ------ -- --------------------------代码解释：
- 引入 CORS 模块。
- 新建 schema 和 root。
- 使用 app.use 启用 CORS。
- 创建 GraphQL 客户端端点和 schema API。
- 监听服务器端口和 GraphQL 客户端端点。
使用 GraphQL 避免跨域问题
在 GraphQL 中，我们只需查询所需数据，以避免无需数据的查询，因此 GraphQL 可以减少网络流量。GraphQL 可以在跨域请求之后只返回必要的数据，以减少网络流量。这使得整个过程更加简单，同时减少了跨域请求的成本。
总结
在本文中，我们详细讨论了如何通过 GraphQL 和跨域资源共享（CORS）来解决 HTTP 请求跨域访问的问题。我们了解了什么是 GraphQL 和 CORS，并为解决跨域问题提供了代码示例。
GraphQL 使 Web 应用程序变得更加简单、高效和安全。它使得 Web 开发人员能够构建更好的应用程序，同时避免使用复杂和出现问题的 API。GraphQL 和 CORS 的结合使用，是 Web 开发必不可少的变革。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a22eae48841e9894e787f7