在我的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,但没有成功。这是我第一次尝试让graphql端点在Next.js
API中工作,我很困惑,是什么问题。
5条答案
按热度按时间carvr3hs1#
不知道你是否已经解决了这个问题,但是我也遇到了同样的问题。即使在
next.js
examples docs中有了最新的更新,它仍然给了我这个错误。所以我用谷歌搜索了一下,这样解决了这个问题:mwg9r5ms2#
借助乔治Vlassis的回答,我在这里发布了阿波罗探索者工作所需的标题:
qgelzfjb3#
如果您使用的是Apollo-server-Micro,那么您可以使用micro-cors:
然后,请记住导入micro_cors而不是micro-cors:
然后,用函数 Package :
r55awzrz4#
如果您通过以下方式诊断端点:
并得到如下结果:
只需将api.bodyParser设置为false,并将其作为一个配置常量放在graphql服务器API文件的底部,如下所示:
mv1qrgav5#
@yohanes Awnser差点就为我工作了!我不得不对它做一些修改: