GraphQL 是一种用于 API 的查询语言，它提供了一种更有效的方式来查询和更新数据，是前端与后端通信的重要工具之一。然而，在实际使用中，有时候我们会遇到前端 GraphQL API 访问不到后端的问题，这可能是由多种原因引起的。本文将总结解决这个问题的常用方法，并提供相应的示例代码，帮助读者深入了解 GraphQL API 访问后端的技术点。
1. CORS 跨域访问
CORS（Cross-Origin Resource Sharing）是一种机制，允许 Web 应用程序从不同的域访问其资源。在使用 GraphQL API 并跨域访问后端时，需要在后端配置跨域访问策略，以允许来自前端站点的跨域请求。
在 Node.js 中使用 CORS 可以很方便地解决跨域访问问题。下面是一个启用 CORS 的示例代码：
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())2. HTTPS 安全连接
HTTPS 是一种加密的通信协议，可确保数据在传输过程中的安全性。如果前端站点采用 HTTPS 协议，而后端站点没有启用 HTTPS 协议，就会导致访问失败。在这种情况下，需要确保后端采用 HTTPS 协议。
启用 HTTPS 协议的方法与平台有关，在 Node.js 应用程序中可以使用以下代码：
-- -------------------- ---- ------- ----- ----- - ---------------- ----- -- - ------------- ----- ------- - - ---- ------------------------------------ ----- ------------------------------------ - --------------------------- ----- ---- -- - ------------------ -------------- --------- ---------------
3. GraphQL 端口配置
GraphQL 端口是后端应用程序监听的端口。如果前端端口与后端端口不匹配，则会导致 GraphQL API 访问不到后端。在这种情况下，需要确保前端配置的端口与后端配置的端口匹配。
下面是一个 GraphQL 端口配置的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------ ----- - ----------- - - -------------------------- ----- ------ - ------------------- ----- --- - --------- ----- ---- - ---- ------------------- ------------- ------- --------- ---- --- ---------------- -- -- - -------------------- ------ ------- -- ---- --------- --
在上述代码中，GraphQL 端口为 4000。
4. 请求地址配置
在使用 GraphQL API 访问后端时，需要确保请求的地址正确。在使用相对地址或脚本标签引入时，可能会出现请求地址不正确的情况。在这种情况下，需要确保请求地址正确。
在使用 axios 请求后端时，可以使用以下代码：
const axios = require('axios')
axios.post('/graphql', {
query: `query { hello }`
}).then(res => {
console.log(res.data)
})5. 解决请求超时问题
在使用 GraphQL API 访问后端时，请求可能会超时。这可能是由于网络问题、服务器负载等原因引起的。在这种情况下，可以使用超时配置解决请求超时问题。
在使用 axios 请求后端时，可以使用以下代码：
const axios = require('axios')
axios.post('/graphql', {
query: `query { hello }`,
timeout: 5000 // 设置请求超时时间
}).then(res => {
console.log(res.data)
})6. 总结
本文总结了解决前端 GraphQL API 访问不到后端的常用方法，包括 CORS 跨域访问、HTTPS 安全连接、GraphQL 端口配置、请求地址配置和解决请求超时问题。了解这些方法可以帮助我们在实际应用中更好地使用 GraphQL API，并提高应用稳定性和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6490277648841e9894e538e5