前言
GraphQL 是一种查询语言，用于 API 的查询接口，它的出现对前端开发者而言是一大利好，可以简化前端与后端的数据交互和处理。然而，当使用 GraphQL 框架进行开发时，前后端运行环境分属不同的域名，因此会在跨域方面存在一些问题。本文将介绍 GraphQL 框架在 Nginx 中跨域访问的问题以及解决方法。
问题描述
在跨域请求中，客户端请求的来源域名和服务端响应的地址不同，浏览器为了防止将客户端的资源发送至其他域名，会默认阻止所有跨域请求。当然我们可以通过在服务端设置响应头信息，允许指定的域名进行请求。但是在使用 GraphQL 框架时，会出现以下问题：
GraphQL 的 schema 是运行在服务端的，因此客户端无法通过设置请求头中的 Origin 来进行跨域请求。
GraphQL 框架默认使用 POST 方法发送请求，又由于各浏览器对于跨域请求的限制，造成在 Nginx 服务器中无法正常访问 GraphQL 接口。
这两个问题都会导致无法跨域请求 GraphQL 接口。我们来详细介绍一下如何解决这两个问题。
解决方法
问题一：无法设置 Origin 请求头
在请求头中添加 Origin 字段是浏览器默认的跨域请求方式，但是它的设置是受限的，因为 GraphQL 的 schema 是在服务端生成的，客户端无法通过修改请求头来进行跨域请求。
解决这个问题的方法就是在服务端设置响应头，在服务端接收请求之后，服务端在响应头中添加 Access-Control-Allow-Origin 字段，允许指定的源站进行跨域请求。在 Nginx 中可以使用 add_header 语句，在 NGINX 配置文件中添加如下信息：
location / {
add_header 'Access-Control-Allow-Origin' $http_origin;
}这行配置允许任意源站进行跨域请求。如果你想指定哪些源站可以进行跨域请求，可以使用下面的配置：
location / {
if ($http_origin ~* (www.example.com)) {
add_header 'Access-Control-Allow-Origin' $http_origin;
}
}在本例中，我们只允许 www.example.com 进行跨域请求。
问题二：POST 请求跨域问题
由于浏览器的限制，在跨域情况下使用 POST 请求可能会面临一些问题。Nginx 中，对于 POST/PUT/PATCH 请求的跨域问题缺省情况下会被禁止。在 GraphQL 中，由于它默认使用 POST 方法发送请求，这会导致不能正常访问接口。
解决这个问题的方法是修改 Nginx 的配置文件。在 Nginx 1.12 及以后版本中，可以使用如下化简的配置代码：
-- -------------------- ---- -------
-------- --------- -
-- ---------------- - ---------- -
---------- ----------------------------- -------------
---------- ------------------------------ ----- ----- ---------
---------- ------------------------------ --------------- --------------
---------- ------------------------ ------
---------- ---------------- --
------ ----
-
-- ---------------- - ------- -
---------- ----------------------------- -------------
---------- ------------------------------ ----- ----- ---------
---------- ------------------------------ --------------- --------------
---------- ------------------------ ------
-
- ---- -------- -- --- ------- ---- ---------
---------- ---------------------------------
-在实际使用中，以上配置是需要根据自己的实际需求来修改的。
示例代码
以下是一个示例代码，仅供参考：
-- -------------------- ---- -------
----- ------------ - ----- ------- --------- - --- -- -
----- ------ - ----- ------------------ -
------- -------
-------- -
--------------- -------------------
---------------- ------- ----------------------------------------
--
----- ---------------- ------ --------- ---
----- -------
------ -----------
------------ ----------
---
------ ----- --------------
--总结
在 Nginx 中跨域访问 GraphQL 框架存在两个问题，一个是无法设置 Origin 请求头，另一个是 POST 请求跨域问题。针对这两个问题，本文提出了相应的解决方法，并给出了相应的示例代码。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654dae4c7d4982a6eb71a7bc