는 반사-DOM 클라이언트

Question

내가 반사-DOM의 버전 0.4을 사용하고있는 종 서버를 ACESS 나는 작은 반사-DOM 클라이언트가 있습니다

XhrRequest with reflex/reflex-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" 

, 내가 을 사용하고 있습니다를 _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 (Cross-Origin Resource Sharing) 문제가 표시됩니다. 브라우저 콘솔에서 다음과 같은 오류가 있는지 확인하여이를 확인할 수 있습니다.

XMLHttpRequest는 http://localhost:8080/name/3을로드 할 수 없습니다. 아니요 요청한 리소스에 'Access-Control-Allow-Origin'헤더가 있습니다. 따라서 원점 'http://localhost:8000'은 허용되지 않습니다. 이 라인

app = serve userAPI server 

:이 경우

,이 라인을 교체하여 서버에 CORS를 활성화 할 수 있습니다

app = simpleCors (serve userAPI server) 

당신은 와이 - 고르를 가져와야합니다 :

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!!"