Elm NetworkError on get request, but console says it's fine

Question

I'm building my first web app in Elm, and I have this problem that when I do a get request to a local server, Elm says it is 'NetworkError' even though the browser console says that it worked.

I've made a minimal example as follows:

The server is made with Haskell and Scotty:

{-# LANGUAGE OverloadedStrings #-}
module Main where

import Web.Scotty
import Data.Text.Lazy (pack)

main :: IO ()
main = scotty 3000 $ get "/" $ text $ pack "a"

All it does is respond with the letter 'a' when you do a get request to localhost:3000. The Elm app just displays the response if there is one and the error if there is one and a button to do the get request with:

import Http exposing (getString, send, Error)
import Html exposing (Html, text, br, button, body, program)
import Html.Events exposing (onClick)

type Msg
  = DataRequest (Result Error String)
  | Refresh

type alias Model =
  { response : String
  , err : String
  }

main : Program Never Model Msg
main = program
  { init = init
  , view = view
  , update = update
  , subscriptions = subscriptions
  }

subscriptions : Model -> Sub Msg
subscriptions _ = Sub.none

init : (Model, Cmd Msg)
init = ({ response = "", err = ""} , Cmd.none)

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    DataRequest (Err err) -> ({ model | err = toString err},     Cmd.none)
    DataRequest (Ok response) -> ({model | response = response}, Cmd.none)
    Refresh -> (model, send DataRequest (getString "http://localhost:3000"))

view : Model -> Html Msg
view {response, err} =
  body []
    [ text <| "Response: " ++ response
    , br [] []
    , text <| "Error: " ++ err
    , br [] []
    , button [ onClick Refresh ] [ text "Send request" ]
    ]

Here's a screenshot of the browser console when I do a get request. I don't really know much about this stuff, but it looks fine as far as I can see.

What I want is for the 'Response' to show the letter 'a' after it, and the 'Error' to be blank. Instead the 'Error' is 'NetworkError' and 'Response' is blank.

I have put this minimal example in a Git repo in case anyone is kind enough to try it out and tell me what is wrong:

https://github.com/8n8/elmnetworkerror

(I am aware that there is a very similar question at Elm http request returns NetworkError for successful requests but there are no answers yet and I thought it would benefit from a complete minimal example.)

Answer 1

I cannot say what your error is, but I get an error due to CORS:

Main.elm:1 Failed to load http://localhost:3000/:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:8000' is therefore not allowed access.

So I have adapted your Main.{hs,elm} to serve the file from the same server as the access is happening to:

Main.elm

Refresh -> (model, send DataRequest (getString "/data"))

Main.hs

main = scotty 3000 $ do
  get "/" $ file "../index.html"
  get "/data" $ text $ pack "a"

instead of using elm-reactor I run elm-make src/Main.elm --output=index.html