Uncaught (in promise) Error: 0 for URL

[kierepka]

Fetch.fs?8131:379 Uncaught (in promise) Error: 0 for URL
at a (Fetch.fs?8131:379)

When I try to run function (based on sample from Fable):

 let getAutoComplete (state: State) = 
            let url = match state.FromBase with
                        | true -> sprintf "%s/api/v1/base_terms/?text=%s&translation_language_id=%i&page=1&per_page=5"
                                            Domain state.SearchText state.CurrentLanguage.Value.id
                        | false -> sprintf "%s/api/v1/translations/?text=%s&base_term_language_id=%i&page=1&per_page=5&current=true"
                                            Domain state.SearchText state.CurrentBaseLanguage.Value.id

            fetch url [Types.RequestProperties.Mode Types.RequestMode.Nocors] // use the fetch api to load our resource
               
               |> Promise.bind (fun res -> res.text()) // get the resul
               |> Promise.map (fun txt -> // bind the result to make further operation
                    printfn "Woof! Woof! %s" txt
                    let decoded = Decode.Auto.fromString<Page<ResultTranslation>> (txt, true)
                    match decoded with
                    | Ok translationPage ->  // everything went well! great!
                        let actualDogURL = translationPage.pages
                        printfn "Woof! Woof! %i" actualDogURL
                    | Error decodingError -> // oh the decoder encountered an error. The string that was sent back from our fetch request does not map well to our PictureInfo type.
                        failwith (sprintf "was unable to decode: %s. Reason: %s" txt decodingError)
                )

Proper URL is: https://slownik-oriin.kropleduszy.pl:8000/api/v1/base_terms/?text=&translation_language_id=1&page=1&per_page=5

Whole code:

namespace OrinDic
open Feliz
open Elmish
open OrinDic.Models
open Fable.Core.JsInterop
open Fable.Import
open Fetch
open Thoth.Json

    module App =

        

        type State = { 
            SearchText : string
            SearchPage : int
            ItemsPerPage : int
            MaxSearchPage : int
            SearchResultsCount : int
            CurrentLanguage : Language option
            CurrentBaseLanguage : Language option
            Languages : Language list
            BaseLanguages : Language list
            Users : obj list
            Translations : Translation list
            TranslationPage : bool
            TranslationsPage : Page<ResultTranslation> option
            Loading : bool
            FromBase : bool
            ShowKeyboard : bool
            AutoCompletes : ResultTranslation list
            }

        type Msg =
            | Increment
            | Decrement

        let [<Literal>] Domain = "https://slownik-oriin.kropleduszy.pl:8000"   

        let init() = 
            let plLanguage = {
                           id = 1
                           name = "Polski"
                           code="PL"
                           special_characters = []}

            { 
               SearchText =  ""
               SearchPage = 1
               ItemsPerPage = 100
               MaxSearchPage = 0
               SearchResultsCount = 0
               CurrentLanguage = Some plLanguage
               CurrentBaseLanguage = Some plLanguage
               Languages = []
               BaseLanguages = []
               Users = []
               Translations = []
               TranslationPage = false
               TranslationsPage = None
               Loading = true
               FromBase = true
               ShowKeyboard = false
               AutoCompletes = []
            }, Cmd.none



        let getAutoComplete (state: State) = 
            let url = match state.FromBase with
                        | true -> sprintf "%s/api/v1/base_terms/?text=%s&translation_language_id=%i&page=1&per_page=5"
                                            Domain state.SearchText state.CurrentLanguage.Value.id
                        | false -> sprintf "%s/api/v1/translations/?text=%s&base_term_language_id=%i&page=1&per_page=5&current=true"
                                            Domain state.SearchText state.CurrentBaseLanguage.Value.id

            fetch url [Types.RequestProperties.Mode Types.RequestMode.Nocors] // use the fetch api to load our resource
               
               |> Promise.bind (fun res -> res.text()) // get the resul
               |> Promise.map (fun txt -> // bind the result to make further operation
                    printfn "Woof! Woof! %s" txt
                    let decoded = Decode.Auto.fromString<Page<ResultTranslation>> (txt, true)
                    match decoded with
                    | Ok translationPage ->  // everything went well! great!
                        let actualDogURL = translationPage.pages
                        printfn "Woof! Woof! %i" actualDogURL
                    | Error decodingError -> // oh the decoder encountered an error. The string that was sent back from our fetch request does not map well to our PictureInfo type.
                        failwith (sprintf "was unable to decode: %s. Reason: %s" txt decodingError)
                )
            

        let update (msg: Msg) (state: State) =
            match msg with
            | Increment -> 
                let a = getAutoComplete state
                { state with SearchPage = state.SearchPage + 1 }, Cmd.none
            | Decrement -> { state with SearchPage = state.SearchPage - 1 }, Cmd.none

        let render (state: State) (dispatch: Msg -> unit) =
            Html.div [
                Html.button [
                    prop.onClick (fun _ -> dispatch Increment)
                    prop.text "Increment me"
                ]

                Html.button [
                    prop.onClick (fun _ -> dispatch Decrement)
                    prop.text "Decrement"
                ]

                Html.h1 state.SearchPage
            ]

namespace OrinDic

    module Models =

        type public BaseTerm =
            {
                id : int
                language_id : int
                slug : string
                name : string
                synonyms : obj list
                definition : string
                last_edit_id : int
            }


        type public Translation =
            {
                id : int
                base_term_id : int
                language_id : int
                current : bool
                name : string
                synonyms : obj list
                definition : string
                last_edit_id : int
                last_approval_id : obj
            }

        type public ResultTranslation =
            {
                base_term : BaseTerm
                translation : Translation
            }

         type public Language = 
             {
                 id : int
                 name : string
                 code : string
                 special_characters : char list
             }
         

        type public Page<'a> =
            {
               pages : int
               count : int
               current_page : int
               results : 'a list
            }

[MangelMaxime]

It seems the exception comes because you are setting your request to not use the CORS mode. Types.RequestProperties.Mode Types.RequestMode.Nocors

If I do:

let url = "https://slownik-oriin.kropleduszy.pl:8000/api/v1/base_terms/?text=&translation_language_id=1&page=1&per_page=5"

promise {
    let! response = Fetch.fetch url []
    let! responseText = response.text()
    printfn "%s" responseText
}
|> Promise.start

Then I got the CORS error:

Access to fetch at 'https://slownik-oriin.kropleduszy.pl:8000/api/v1/base_terms/?text=&translation_language_id=1&page=1&per_page=5' from origin 'https://fable.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

In principle fable-fetch is just a thin binding on top of the Fetch API.

We need to try fetching the API using raw JavaScript to see if the problem is "expected" or if it's a bug in the fable-fetch library.