如何使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)

的錯誤信息是：

否「訪問控制允許來源」標題存在於請求的資源

來源

2017-06-20 Nicolas S.Xu

我在使用Vue客戶端進行調用時遇到同樣的問題。我可以解決的唯一方法是禁用瀏覽器上的跨源限制以進行測試。

來源

2017-09-22 05:19:58

請插入下面的代碼在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);

我想，這可能會解決你的問題

來源

2017-09-22 05:40:54

如何使Graphql與CORS一起運行

回答

相關問題