前言
GraphQL 是一种用于 API 的查询语言，它提供了一种更高效、强大和灵活的方式来获取数据。在前端开发中，尤其是在开发单页应用程序时，GraphQL 成为了很多人的选择。然而，由于某些限制，GraphQL 的开发过程中常常遇到跨域问题。那么在本文中，我们将讨论 GraphQL 开发中常见的跨域问题及其解决方法。
什么是跨域？
跨域是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。同源策略是指协议、域名或者端口号不同，就不能进行跨域通信。例如，从 http://www.example.com/index.html 向 http://api.example.com/getData 发起请求，就算在开发环境下也是不允许的。
GraphQL 跨域问题
在 GraphQL 开发中，我们通常会遇到以下几种跨域问题：
1. 开发环境
在本地开发时，前端项目和后台项目通常不在同一端口下，例如前端项目运行在 8888 端口，而后台项目运行在 3000 端口。这时就会出现跨域的问题。
2. GraphQL 接口与 RESTful 接口共存问题
在某些情况下，GraphQL 接口和 RESTful 接口需要共存。例如，在一个旧的项目中，需要添加一些新功能，但是现有的 RESTful 做不到，这时就需要使用 GraphQL。但是，这两种接口的存在可能导致跨域的问题。
3. GraphQL 接口和外部接口通信问题
有时，我们需要使用后端已有的接口，而这些接口可能并不在本地开发环境下，这时就会遇到跨域的问题。
解决方法
针对以上三种情况，我们提供以下的解决方法。
1. 开发环境
在本地开发时，我们可以使用 webpack-dev-server-proxy 插件，将前端请求转发到服务器端口。这里提供一份示例代码：
// javascriptcn.com 代码示例
// webpack.config.js
module.exports = {
devServer: {
port: 8888,
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api': ''},
}
}
}
}在以上代码中，我们将前端请求路径中的 /api 转发到后台接口的 http://localhost:3000 上。
2. GraphQL 接口与 RESTful 接口共存问题
为了解决这个问题，只需要在后台添加一个新的路由，将 GraphQL 接口暴露出来即可。
// javascriptcn.com 代码示例
const express = require('express');
const graphqlHTTP = require('express-graphql');
const schema = require('./schema');
const app = express();
app.use('/graphql', graphqlHTTP({
schema: schema,
graphiql: true
}));
// 新增的路由
app.get('/restful', (req, res) => {
res.json({data: 'restful data'});
});
app.listen(3000, () => {
console.log('listening on port 3000');
});在以上代码中，我们添加了一个新的路由 /restful，用于返回一个固定的 JSON 数据，用于测试。
3. GraphQL 接口和外部接口通信问题
解决这个问题的方法有很多，这里我们介绍一种比较简单的方法，即在前端使用 JSONP 发送请求。
// javascriptcn.com 代码示例
function jsonp(url, fn) {
let script = document.createElement('script');
script.src = url + '?callback=' + fn;
document.getElementsByTagName('head')[0].appendChild(script);
}
jsonp('http://example.com/api?param1=value1¶m2=value2', 'jsonpCallback');
function jsonpCallback(data) {
console.log(data);
}以上代码中，我们使用了一个叫做 jsonp 的方法，通过动态创建一个 script 标签，将远程接口地址作为 src 属性的值设置到 script 标签上，然后在这个地址上添加一个 get 请求参数，参数的值设置为一个回调函数的名称。服务端的返回数据会作为这个函数的参数传递到前端，自然就可以实现跨域了。
总结
跨域问题在 GraphQL 开发中并非不可避免，我们可以使用以上方法解决这个问题。在实际开发中，我们需要结合具体的业务场景，选择最适合自己项目的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/651c293495b1f8cacd3b8dd0