GraphQL 遇到的 CORS 错误解决办法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常使用 GraphQL 来请求后端数据。但是，在使用 GraphQL 进行跨域请求时，我们可能会遇到 CORS 错误，导致请求失败。本文将介绍 GraphQL 遇到的 CORS 错误解决办法，并提供示例代码，帮助读者更好地理解和解决这个问题。

什么是 CORS 错误？

CORS（Cross-Origin Resource Sharing）是浏览器的一种安全机制，用于限制跨源请求的访问。当浏览器检测到请求跨域时，会向服务器发起一个预检请求，如果服务器返回的响应头中没有包含允许的跨域请求头信息，那么浏览器就会拒绝该请求，从而导致 CORS 错误。

GraphQL 遇到的 CORS 错误

在使用 GraphQL 进行跨域请求时，由于 GraphQL 使用了 POST 方法发送请求，因此浏览器会自动发起预检请求，如果服务器没有正确配置响应头信息，就会出现 CORS 错误。

例如，以下代码使用 Apollo Client 发起 GraphQL 请求：

// javascriptcn.com 代码示例
import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://example.com/graphql',
  cache: new InMemoryCache()
});

client
  .query({
    query: gql`
      query {
        users {
          id
          name
        }
      }
    `
  })
  .then(result => console.log(result));

如果服务器没有正确配置响应头信息，就会出现类似以下的 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 错误：

// javascriptcn.com 代码示例
const express = require('express');
const { ApolloServer, gql } = require('apollo-server-express');
const cors = require('cors');

const typeDefs = gql`
  type Query {
    users: [User!]!
  }

  type User {
    id: ID!
    name: String!
  }
`;

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];

const resolvers = {
  Query: {
    users: () => users
  }
};

const server = new ApolloServer({
  typeDefs,
  resolvers
});

const app = express();

// 方法一：在服务器端添加允许跨域请求的响应头信息
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();
});

// 方法二：使用 CORS 中间件
// app.use(cors());

// 方法三：使用代理服务器
// const proxy = require('http-proxy-middleware');
// app.use('/graphql', proxy({ target: 'https://example.com', changeOrigin: true }));

server.applyMiddleware({ app });

app.listen({ port: 4000 }, () => {
  console.log(`Server ready at http://localhost:4000${server.graphqlPath}`);
});

总结

本文介绍了 GraphQL 遇到的 CORS 错误解决办法，包括在服务器端添加允许跨域请求的响应头信息、使用 CORS 中间件、使用代理服务器等方法。希望读者能够通过本文了解如何解决 GraphQL 遇到的 CORS 错误，并在实际开发中避免出现这个问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65868725d2f5e1655d0f79c1