对接GraphQL Mock Server，这几点你需要注意！

2024-01-13 11:08:12

跨域问题概述

当浏览器从一个域名的网页向另一个域名的服务器发送请求时，就会发生跨域问题。这主要是出于安全考虑，浏览器会限制跨域请求，以防止恶意网站窃取敏感信息。

解决方案：使用 core.js

core.js 是一个 JavaScript 库，可以帮助解决跨域问题。它可以在客户端和服务器端使用，支持多种跨域解决方案，如 CORS、JSONP 和 WebSocket。

具体步骤

安装 core.js

npm install core-js

在您的 HTML 页面中引入 core.js

<script src="path/to/core.js"></script>

在您的 JavaScript 代码中，使用 core.js 的 polyfill 功能来支持跨域请求。

core.polyfill();

在您的 GraphQL Mock Server 中，添加 CORS 头。

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});

示例代码

// 前端代码

const requestBody = {
  query: `
    query {
      posts {
        id
        title
        content
      }
    }
  `,
};

fetch('http://localhost:3000/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(requestBody),
})
.then(res => res.json())
.then(data => console.log(data))
.catch(error => console.error(error));

// 后端代码

const express = require('express');
const cors = require('cors');
const graphqlHTTP = require('express-graphql');
const schema = require('./schema');

const app = express();

app.use(cors());

app.use('/graphql', graphqlHTTP({
  schema: schema,
  graphiql: true,
}));

app.listen(3000);