apollo-server-micro：响应缺少标头“访问控制允许方法：POST”答案

【问题标题】：apollo-server-micro: response is missing header 'access-control-allow-methods: POST'apollo-server-micro：响应缺少标头“访问控制允许方法：POST”
【发布时间】：2021-10-15 02:34:30
【问题描述】：

在我的 next.js 应用程序中，我正在尝试配置 Apollo 端点：

import { ApolloServer, gql } from "apollo-server-micro";

// This data will be returned by our test endpoint. Not sure if I need id? https://apuyou.io/blog/serverless-graphql-apollo-server-nextjs
const tacos = {
  meat: [
    {
      type: 'Al Pastor',
      imgURL: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/190130-tacos-al-pastor-horizontal-1-1549571422.png?crop=0.668xw:1.00xh;0.175xw,0&resize=480:*'
    },
    {
      type: 'Barbacoa',
      imgURL: 'https://i2.wp.com/www.downshiftology.com/wp-content/uploads/2021/02/Barbacoa-Tacos-3.jpg'
    },
    {
      type: 'Chorizo',
      imgURL: 'https://www.seriouseats.com/thmb/-8LIIIObcZMUBy-9gXlMsHcaeMI=/610x458/filters:fill(auto,1)/__opt__aboutcom__coeus__resources__content_migration__serious_eats__seriouseats.com__recipes__images__2014__04__20140428-sloppy-joe-chorizo-taco-recipe-food-lab-lite-8-503212a07b0a4d499952ff40aed57694.jpg'
    },
  ],
  fish: [
    {
      type: 'Camaron',
      imgURL: 'https://juegoscocinarpasteleria.org/wp-content/uploads/2019/07/1563435179_315_Tacos-De-Camarones-Con-Crema-De-Cal-Y-Cilantro.jpg'
    },
    {
      type: 'Salmon',
      imgURL: 'https://www.cookingclassy.com/wp-content/uploads/2015/04/salmon-tacos-with-avocado-salsa4-srgb..jpg'
    },
    {
      type: 'Pulpo',
      imgURL: 'https://images.squarespace-cdn.com/content/v1/5710a8b3e707ebb8c58fea2c/1590075315244-QNXQE1LGPH06HV3EDF6B/tacos_34.jpg?format=1000w'
    },
  ],
  veggi: [
    {
      type: 'Cauliflower',
      imgURL: 'https://minimalistbaker.com/wp-content/uploads/2017/07/DELICIOUS-Roasted-Cauliflower-Tacos-with-Adobo-Romesco-30-min-healthy-SO-flavorful-vegan-glutenfree-plantbased-cauliflower-tacos-recipe-8.jpg'
    },
    {
      type: 'Avocado',
      imgURL: 'https://www.ambitiouskitchen.com/wp-content/uploads/2018/03/tacos.jpg'
    },
    {
      type: 'Tofu',
      imgURL: 'http://www.fromachefskitchen.com/wp-content/uploads/2016/08/Tofu-and-Black-Bean-Tacos.jpg'
    },
  ],
}

const typeDefs = gql`
  type Taco {
    type: String
    imgURL: String
  }

  type Query {
    tacos: [Taco]
  }
`;

const resolvers = {
  Query: {
    tacos: () => {
      return tacos;
    },
  },
};

const apolloServer = new ApolloServer({ typeDefs, resolvers });
module.exports = apolloServer.start().then(() => apolloServer.createHandler({path: '/api/graphql',}));


export const config = {
  api: {
    bodyParser: false,
  },
};

但是，http://localhost:3000/api/graphql 让我进入了 Apollo Studio 起始页。当我终于到达资源管理器时，我收到错误消息，无法访问我的服务器：OPTIONS 响应缺少标头access-control-allow-methods: POST。我尝试添加 cors ApolloServer，但没有成功。那是我第一次尝试在 Next.js API 中让 graphql 端点工作，我很迷茫，出了什么问题。

【问题讨论】：

标签： next.js apollo react-apollo apollo-server

【解决方案1】：

在 George Vlassis 的回答的帮助下，我在这里发布了只需要工作 Apollo Explorer 的标题：

res.setHeader(
  'Access-Control-Allow-Origin',
  'https://studio.apollographql.com',
);
res.setHeader('Access-Control-Allow-Credentials', 'true');
res.setHeader('Access-Control-Allow-Headers', ' Content-Type');

【讨论】：

【解决方案2】：

不确定你是否已经解决了，但我遇到了同样的问题。即使在 next.js 示例文档中进行了最新更新，它仍然给了我这个错误。所以通过一点谷歌搜索，我解决了这个问题：

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

const startServer = apolloServer.start();

export default async function handler(req, res) {
    res.setHeader("Access-Control-Allow-Credentials", "true");
    res.setHeader(
        "Access-Control-Allow-Origin",
        "https://studio.apollographql.com"
    );
    res.setHeader(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Access-Control-Allow-Methods, Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Access-Control-Allow-Headers"
    );
    res.setHeader(
        "Access-Control-Allow-Methods",
        "POST, GET, PUT, PATCH, DELETE, OPTIONS, HEAD"
    );
    if (req.method === "OPTIONS") {
        res.end();
        return false;
    }

    await startServer;
    await apolloServer.createHandler({
        path: "/api/graphql",
    })(req, res);
}

【讨论】：