在前端开发中，我们经常使用 GraphQL 来请求后端数据。但是，在使用 GraphQL 进行跨域请求时，我们可能会遇到 CORS 错误，导致请求失败。本文将介绍 GraphQL 遇到的 CORS 错误解决办法，并提供示例代码，帮助读者更好地理解和解决这个问题。
什么是 CORS 错误？
CORS（Cross-Origin Resource Sharing）是浏览器的一种安全机制，用于限制跨源请求的访问。当浏览器检测到请求跨域时，会向服务器发起一个预检请求，如果服务器返回的响应头中没有包含允许的跨域请求头信息，那么浏览器就会拒绝该请求，从而导致 CORS 错误。
GraphQL 遇到的 CORS 错误
在使用 GraphQL 进行跨域请求时，由于 GraphQL 使用了 POST 方法发送请求，因此浏览器会自动发起预检请求，如果服务器没有正确配置响应头信息，就会出现 CORS 错误。
例如，以下代码使用 Apollo Client 发起 GraphQL 请求：
-- -------------------- ---- -------
------ - ------------- -------------- --- - ---- -----------------
----- ------ - --- --------------
---- ------------------------------
------ --- ---------------
---
------
--------
------ ----
----- -
----- -
--
----
-
-
-
--
------------ -- ---------------------如果服务器没有正确配置响应头信息，就会出现类似以下的 CORS 错误：
Access to XMLHttpRequest at 'https://example.com/graphql' from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决 GraphQL 遇到的 CORS 错误
要解决 GraphQL 遇到的 CORS 错误，需要在服务器端正确配置响应头信息，允许跨域请求。以下是一些常见的解决方法：
方法一：在服务器端添加允许跨域请求的响应头信息
在服务器端添加以下响应头信息，即可允许跨域请求：
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});其中，Access-Control-Allow-Origin 表示允许跨域请求的来源，* 表示允许任何来源的跨域请求；Access-Control-Allow-Methods 表示允许的请求方法；Access-Control-Allow-Headers 表示允许的请求头信息。
方法二：使用 CORS 中间件
可以使用 cors 中间件来自动添加允许跨域请求的响应头信息，例如：
const cors = require('cors');
app.use(cors());方法三：使用代理服务器
可以使用代理服务器来绕过跨域限制，将 GraphQL 请求转发到同源的服务器上。例如，可以使用 http-proxy-middleware 中间件来实现代理服务器：
const proxy = require('http-proxy-middleware');
app.use('/graphql', proxy({ target: 'https://example.com', changeOrigin: true }));其中，target 表示要转发到的服务器地址，changeOrigin 表示是否修改请求头中的 Origin 字段。
示例代码
以下是一个完整的示例代码，演示如何使用以上方法解决 GraphQL 遇到的 CORS 错误：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ------------- --- - - ---------------------------------
----- ---- - ----------------
----- -------- - ----
---- ----- -
------ --------
-
---- ---- -
--- ---
----- -------
-
--
----- ----- - -- --- -- ----- ------- -- - --- -- ----- ----- ---
----- --------- - -
------ -
------ -- -- -----
-
--
----- ------ - --- --------------
---------
---------
---
----- --- - ----------
-- -----------------------
------------- ---- ----- -- -
-------------------------------------------- -----
--------------------------------------------- ----- ----- ---- ---------
--------------------------------------------- -------------- ----------------
-------
---
-- ------ ---- ---
-- ----------------
-- -----------
-- ----- ----- - ---------------------------------
-- ------------------- ------- ------- ---------------------- ------------- ---- ----
------------------------ --- ---
------------ ----- ---- -- -- -- -
------------------- ----- -- ---------------------------------------------
---总结
本文介绍了 GraphQL 遇到的 CORS 错误解决办法，包括在服务器端添加允许跨域请求的响应头信息、使用 CORS 中间件、使用代理服务器等方法。希望读者能够通过本文了解如何解决 GraphQL 遇到的 CORS 错误，并在实际开发中避免出现这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65868725d2f5e1655d0f79c1