使用 core.js 解決 GraphQL Mock Server 跨域問題

趙趙發表於2019-02-28
最近在做GraphQL相關的前端開發,由於後端進度較慢,所以使用了 Apollo 的 Mocking Server.
開發過程中遇到一個問題就是,前端通過 graphql訪問 基於 express 的graphql mock server 的時候會報異常。在medium上找到一篇相關文章,翻譯出來供大家參考。

使用 core.js 解決 GraphQL Mock Server 跨域問題

通過報錯應該可以確定是因為跨域的原因。
跨域未啟用的時候究竟發生了什麼導致了上面的報錯?
實際上,CORS實際上是客戶端和伺服器之間通訊流程的一種規範。在某些情況下,這個流程需要伺服器處理HTTP OPTIONS請求,正如下面這個流程圖可以所示:跨域資源請求需要額外的OPTIONS HTTP request.

使用 core.js 解決 GraphQL Mock Server 跨域問題

問題所在就是,express-graphql 和apollo-server 不接受除了 GET 和 POST 以外的請求,所以請求失敗導致異常出現:OPTIONS http://localhost:4000 405 (Method not allowed).
不過問題也很容易解決。由於 express-graphql 和 apollo-server 都是基於express.js的。所以可以用 cors 這個middleware來修復這個問題。

首先安裝 cors.js  

npm install cors --save複製程式碼
然後在 server.js裡使用。

具體程式碼如下:

使用 core.js 解決 GraphQL Mock Server 跨域問題

再次請求,即可正常訪問:

使用 core.js 解決 GraphQL Mock Server 跨域問題

 原文連結

相關文章