如何使Graphql与CORS一起运行

问题描述：

我已经阅读了几篇关于这方面的文章，但没有一篇适合我。如何使Graphql与CORS一起运行

https://github.com/graphql/express-graphql/issues/14

这里是我的expressjs代码：

app.use("/graphql", function (req, res, next) { 
    res.header('Access-Control-Allow-Origin', 'http://localhost:8080'); 
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With'); 
    if (req.method === 'OPTIONS') { 
    res.sendStatus(200); 
    } else { 
    next(); 
    } 
}); 


// apply graphql middleware 
app.use('/graphql', graphqlHTTP({ 
    schema: schema, 
    rootValue: rootResolver, 
    graphiql: true, 
}))

如果我这样做，这样一来，飞行前的选项是成功的，但实际POST请求失败。

我正在使用此函数向本地graphql服务器发出请求。

function postFn(url, payload) { 
    return $.ajax({ 
    method: 'POST', 
    url: url, 
    contentType: 'application/json', 
    xhrFields: { 
     withCredentials: true 
    }, 
    data: payload 
    }); 
}

这里是前端代码来触发POST请求：

let query = ` 
    query myqury($offset: Int, $limit: Int) { 
     clients(limit:$limit , offset:$offset) { 
     docs{ 
      _id 
      full_name 
     } 
     total 
     limit 
     offset 
     } 
    } 
    ` 
    var variables = { 
    offset: offset, 
    limit: limit 
    } 
    let payload = { 
    query: query, 
    variables: variables 
    } 
    return request.post(graphQlEndpoint, payload)

的错误信息是：

否“访问控制允许来源”标题存在于请求的资源

答

我在使用Vue客户端进行调用时遇到同样的问题。我可以解决的唯一方法是禁用浏览器上的跨源限制以进行测试。

答

请插入下面的代码在server.js文件

const graphQLServer = express(); 
 
const corsOptions = { 
 
    origin(origin, callback) { 
 
     callback(null, true); 
 
    }, 
 
    credentials: true 
 
}; 
 
graphQLServer.use(cors(corsOptions)); 
 
var allowCrossDomain = function(req, res, next) { 
 
    res.header('Access-Control-Allow-Origin', '*'); 
 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
 
    res.header('Access-Control-Allow-Headers', 'Content-Type,token'); 
 
    next(); 
 
} 
 
graphQLServer.use(allowCrossDomain);

我想，这可能会解决你的问题

如何使Graphql与CORS一起运行

相关推荐