Blocked calling api from code playground

[freiguy1]

Hey there. I am attempting to call gutendex.com using elm in the "Ellie" playground. You can experiment with going to ellie-app.com. Here is the code:

module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Http
import Json.Decode exposing (Decoder, field, string)

type alias Model =
    { title : Maybe String }

initialModel flags =
    ( { title = Nothing }, getBook )

getBook : Cmd Msg
getBook =
    Http.get
        { url = url
        , expect = Http.expectJson GotBook bookDecoder
        }

bookDecoder : Decoder String
bookDecoder =
    field "title" string

type Msg
    = GotBook (Result Http.Error String) -- start with just title

update : Msg -> Model -> ( Model, Cmd msg )
update msg model =
    case msg of
        GotBook (Ok title) ->
            ( { model | title = Just title }, Cmd.none )

        GotBook (Err e) ->
            ( model, Cmd.none )

view : Model -> Html Msg
view model =
    case model.title of
        Just title ->
            div [] [ text title ]

        Nothing ->
            div [] [ text "Looking..." ]

url =
    "http://gutendex.com/books/2591/"

main : Program () Model Msg
main =
    Browser.element
        { init = initialModel
        , view = view
        , update = update
        , subscriptions = \_ -> Sub.none
        }

However, in dev tools, I see I get a 'Blocked' request. I'm not sure what this means. Is your server setup to block external requests like this?

Thanks.

[garethbjohnson]

Hi Ethan, I think the issue is that Gutendex is not an https site, but Ellie is, so you browser blocks the request for security. Sorry! I will look into supporting https requests this weekend.

[freiguy1]

Oh ok, no rush. I was just playing around with building a nice gutenberg web reader. When I try my program locally (not through Ellie), I get a different error, this time related to CORS.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://gutendex.com/books/2591/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

Do you think it'd be possible to add a CORS header to allow any domain? If not maybe just allow localhost? I think that header would look something like

Access-Control-Allow-Origin : localhost

Thanks for the prompt response!

[garethbjohnson]

OK, I think HTTPS and CORS are working now. Would you mind letting me now if it works for you when you get a chance?

By the way, if you want to do more than playground work, I recommend hosting your own version of Gutendex. I might have to restrict access to gutendex.com if I get too much traffic to handle.

[freiguy1]

Sweet! I'll check it out. Yeah - restricted/throttled access is all I need since it's just for me at the moment. I'll close this issue if I find that it's working for me.

[freiguy1]

Looks great, thanks a lot!