Elm http 请求 returns NetworkError 请求成功

Question

我有相当多的使用 React 构建 Web 应用程序的经验，但我想学习 Elm。几天来我一直在努力解决 HTTP 请求问题。

我是运行 localhost:8080 的 Elm 应用程序，localhost:8081 是我的支持者 API。每当我发出 HTTP 请求（我已经尝试了 GET 和 POST 请求）时，我都会收到 NetworkError。我一直在研究 Elm JSON 解码器，认为这可能是我的问题所在，但我尝试从我的服务器发送简单的字符串并在我的 Elm 应用程序中使用 Decode.string 解码器，我仍然得到 NetworkError。

这是我的代码目前的样子：

Commands.elm

module Commands exposing (..)

import Models exposing (..)
import Msg exposing (..)
import Http
import Json.Decode as Decode
import Json.Encode as Encode


createTempUser : Model -> Cmd Msg
createTempUser model =
  let
    tempUserBody =
      [ ( "firstname", Encode.string model.firstname )
      , ( "lastname", Encode.string model.lastname )
      , ( "phone", Encode.string model.phone )
      ]
        |> Encode.object
        |> Http.jsonBody

    url =
      myAPIUrl ++ "/endpoint"

    contentType = Http.header "Content-type" "text/plain"

    post =
      Http.request
        { method = "POST"
        , headers =  [contentType]
        , url = url
        , body = tempUserBody
        , expect = Http.expectJson decodeApiResponse
        , timeout = Nothing
        , withCredentials = False
        }

  in
    Http.send Msg.TempUserCreated post


decodeApiResponse : Decode.Decoder ApiResponse
decodeApiResponse =
  Decode.map4 ApiResponse
    (Decode.at ["status"] Decode.int)
    (Decode.at ["message"] Decode.string)
    (Decode.at ["created"] Decode.int)
    (Decode.at ["error"] Decode.string)


myAPIUrl : String
myAPIUrl = "http://localhost:8081"

Models.elm

module Models exposing (..)


type alias ApiResponse =
  { status: Int
  , message: String
  , created: Int
  , error: String
  }

Msg.elm

module Msg exposing (..)

import Navigation exposing (Location)
import Models exposing (..)
import Http


type Msg
  = ChangeLocation String
  | OnLocationChange Location
  | CreateTemporaryUser
  | TempUserCreated ( Result Http.Error ApiResponse )

Update.elm

module Update exposing (..)

import Msg exposing (Msg)
import Models exposing (..)
import Routing exposing (..)
import Commands exposing (..)
import Navigation

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Msg.ChangeLocation path ->
      ( { model | changes = model.changes + 1 }, Navigation.newUrl path )

    Msg.OnLocationChange location ->
      ( { model | error = "", route = parseLocation(location) }, Cmd.none )

    Msg.CreateTemporaryUser ->
      ( model, createTempUser model )

    Msg.TempUserCreated (Ok res) ->
       update (Msg.ChangeLocation signupCodePath) { model | httpResponse = toString(res) }

    Msg.TempUserCreated (Err err) ->
      ( { model | error = toString(err) }, Cmd.none )

Chrome 的网络开发工具将响应显示为这样

{"status":200,"message":"Successfully inserted temporary 
user","created":1518739596447,"error":""}

我认为这可能是所有相关代码，但如果您需要查看更多代码，我会进行更新，包括请求的代码。我承认我对 Elm Json.Decode 库没有完全的了解，但我的印象是，如果这是问题所在，我会得到一个包含额外上下文的 UnexpectedPayload 错误。

Answer 1

@Sidney 和@SimonH，

感谢您为我调查此事，我感到很难过，因为这毕竟不是 Elm 的问题。

解决方案最终使用服务器上的 CORS 中间件来添加 'Access-Control-Allow-Origin' header。服务器仍在响应 200 状态，甚至包括整个成功响应 body 但这导致 Elm 的 Http 结果失败。

再次感谢您的宝贵时间！

Answer 2

为了在开发过程中快速解决问题，您可以使用 Firefox 的 CORS everywhere extension 并将以下内容添加到扩展首选项的白名单中：

/^https?...localhost:8888\//i

对于 chrome 你可能可以使用 this extension

Elm http 请求 returns NetworkError 请求成功

Elm http request returns NetworkError for successful requests

http

elm