接取與反射-DOM客戶

Question

我使用的是反射-DOM的版本0.4的僕人服務器，我有一個微小的反射-DOM客戶端：

{-# LANGUAGE OverloadedStrings #-} 
import Reflex.Dom 
import qualified Data.Text as T 
import Data.Monoid 

main :: IO() 
main = mainWidget body 

body :: MonadWidget t m => m() 
body = el "div" $ do 
    pb <- getPostBuild 
    snd <- button "Send" 
    -- Use one of the following URL's: 
    let defReq = "http://localhost:8080/name/3" 
    -- let defReq = "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY" 
    let req = XhrRequest "GET" defReq (def {_xhrRequestConfig_sendData = defReq}) 
    let evReq = tagPromptlyDyn (constDyn req) snd 
    evRsp <- performRequestAsync evReq 
    let evResult = (result . _xhrResponse_responseText) <$> evRsp 
    el "p" $ return() 
    dynText =<< holdDyn "NOPE" evResult 
    return() 

result :: Show a => Maybe a -> T.Text 
result (Just x) = "Received: " <> T.pack (show x) 
result Nothing = "Response is Nothing" 

如XhrRequest with reflex/reflex-dom描述，我使用_xhrResponse_responseText而不是decodeXhrResponse。

當我運行這個客戶端與NASA的URL，它顯示一個很好的JSON字符串。因此，我認爲，這個反射客戶端正在工作。

我有一個小丫頭太服務器：

{-# LANGUAGE OverloadedStrings #-} 
{-# LANGUAGE DataKinds #-} 
{-# LANGUAGE TypeOperators #-} 

import Servant 
import Servant.API 
import Servant.Server 
import Network.Wai 
import Network.Wai.Handler.Warp 
import Network.Wai.Logger  (withStdoutLogger) 
import qualified Data.Text as T 

main :: IO() 
main = withStdoutLogger $ \aplogger -> do 
     let settings = setPort 8080 $ setLogger aplogger defaultSettings 
     runSettings settings app 

app :: Application 
app = serve userAPI server 

userAPI :: Proxy API -- API usage: http://localhost:8080/name/2 
userAPI = Proxy 

type API = "name" :> Capture "pid" Int :> Get '[PlainText] T.Text 

server :: Server API 
server = name 

name :: Monad m => Int -> m T.Text 
name pid = return $ nameById pid 

nameById :: Int -> T.Text 
nameById 1 = "Isaac Newton" 
nameById 2 = "Galileo Galilei" 
nameById 3 = "Marie Curie" 
nameById _ = "UNKNOWN!!" 

當我訪問了瀏覽器該服務器與http://localhost:8080/name/3或curl，我看到預期的結果Marie Curie。因此，我認爲，這個僕人服務器正在工作。

當我運行與本地主機的URL上面反射-DOM客戶端，我可以看到服務器的標準輸出日誌的請求，但該客戶端不顯示居里夫人的名稱。相反，客戶端只顯示一個空字符串！ 因此，作爲一個團隊，客戶端和服務器不能一起工作！爲什麼？

Answer 1

您可能正在看到跨源資源共享（CORS）問題。

的XMLHttpRequest無法加載http://localhost:8080/name/3：您可以通過檢查你的瀏覽器控制檯，看起來像這樣的錯誤驗證這一點（在Chrome中至少）。否 「訪問控制 - 允許來源」標題出現在請求的 資源中。原因'http://localhost:8000'因此不允許 訪問。這條線

app = serve userAPI server 

：

如果是這樣的話，您可以通過更換該線使您的服務器CORS

app = simpleCors (serve userAPI server) 

您將需要進口威-CORS ：

import Network.Wai.Middleware.Cors 

這裏是你的僕人服務器與這些變動es：

{-# LANGUAGE OverloadedStrings #-} 
{-# LANGUAGE DataKinds #-} 
{-# LANGUAGE TypeOperators #-} 

import Servant 
import Servant.API 
import Servant.Server 
import Network.Wai 
import Network.Wai.Handler.Warp 
import Network.Wai.Logger  (withStdoutLogger) 
import Network.Wai.Middleware.Cors 
import qualified Data.Text as T 

main :: IO() 
main = withStdoutLogger $ \aplogger -> do 
     let settings = setPort 8080 $ setLogger aplogger defaultSettings 
     runSettings settings app 

app :: Application 
app = simpleCors (serve userAPI server) 

userAPI :: Proxy API -- API usage: http://localhost:8080/name/2 
userAPI = Proxy 

type API = "name" :> Capture "pid" Int :> Get '[PlainText] T.Text 

server :: Server API 
server = name 

name :: Monad m => Int -> m T.Text 
name pid = return $ nameById pid 

nameById :: Int -> T.Text 
nameById 1 = "Isaac Newton" 
nameById 2 = "Galileo Galilei" 
nameById 3 = "Marie Curie" 
nameById _ = "UNKNOWN!!"