HTTP POST bad request

[YvonneChenCS]

Hi, I am incredibly new to elm and I am currently running into this problem. I have this web app that I am running on my local machine. It is supposed to send a POST method to my backend, which is also local. Here is my elm code:

module HomePage exposing (main)

import Browser
import Html exposing (…)
import Html.Attributes exposing (…)
import Html.Events exposing (…)
import Http
import Json.Encode
import Json.Decode exposing (list, string)

– VIEW
view : Model -> Html Msg
view model =
div [ class “jumbotron” ]
[ h1 [] [ text “Welcome to Gutenberg Project Book Recommender” ]
, h2 [] [text "Find books similar to: "]
, viewInput “text” “Keyword” model.keyword Keyword
, button [ onClick SubmitForm ] [ text “Go!” ]
, viewSearch model]

viewInput : String -> String -> String -> (String -> msg) -> Html msg
viewInput t p v toMsg =
input [ type_ t, placeholder p, value v, onInput toMsg ] []

viewSearch: Model -> Html Msg
viewSearch model =
case model.searchResponse of
SearchLoading ->
div []
[ text “Waiting…” ]
SearchFailure ->
div []
[ text “Search failed, please try again.” ]
SearchSuccess list ->
div []
[ text “Are you looking for…” ]
– this branch is currently for test purposes and not finished

– MODEL
type alias Model =
{ keyword : String
, searchResponse : SearchStatus}

type SearchStatus
= SearchLoading
| SearchFailure
| SearchSuccess (List String)

initialModel : Model
initialModel =
{ keyword = “”
, searchResponse = SearchLoading
}

init : () -> ( Model, Cmd Msg)
init _ =
(initialModel, Cmd.none)’

– UPDATE
type Msg
= Keyword String
| NoOp
| SubmitForm
| GotSearch (Result Http.Error (List String))

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Keyword keyword ->
( { model | keyword = keyword }, Cmd.none )
NoOp ->
( model, Cmd.none )
SubmitForm ->
( { model | searchResponse = SearchLoading }, search model)
GotSearch result ->
case result of
Ok list ->
({ model | searchResponse = SearchSuccess list }, Cmd.none)
Err _ ->
({ model | searchResponse = SearchFailure }, Cmd.none)

– HTTP
search : Model -> Cmd Msg
search model =
Http.post
{ url = “http://0.0.0.0:5000/search”
, body = Http.stringBody model.keyword model.keyword
, expect = Http.expectJson GotSearch (Json.Decode.list string)
}

– SUBSCRIPTIONS
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none

main =
Browser.element
{ init = init
, update = update
, subscriptions = subscriptions
, view = view}

When I test this code on my browser, the message “Search failed, please try again.” appears, which seems to indicate that expectJSON returned an error. On the terminal where my backend is running, I see this message:

127.0.0.1 - - [22/Aug/2020 06:12:32] “POST /search HTTP/1.1” 400 -

I am having trouble debugging and obtaining HTTP metadata. Any help would be appreciated!

[malaire]

You are ignoring the error you get, so at first change

    Err _ ->
        ({ model | searchResponse = SearchFailure }, Cmd.none)

to e.g.

    Err error ->
        let
            _ = Debug.log "Error is " error
        in
        ({ model | searchResponse = SearchFailure }, Cmd.none)

and then check javascript console in browser to see what error you get

[YvonneChenCS]

Thank you! I see Network error with this message:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://0.0.0.0:5000/search. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

So it is a CORS issue?

[antew]

Yeah, looks like a CORS issue, on the server side you’ll want to respond with a header of Access-Control-Allow-Origin: * (or replace the * with the host and port your website is being served from if you want to be more restrictive).

You may also need to respond to CORS preflight requests (OPTIONS requests) with the same CORS headers, if you are using node the cors package can make it easier to manage the setup.