F# 尽管在Elm和Giraffe中都启用了CORS，但Http Post仍存在问题

我一直在努力实现Elm客户端和Giraffe服务器之间的跨域请求

Elm（客户）：

tryPostRegistration : String -> Http.Body -> Decoder JsonProfile -> Http.Request JsonProfile
tryPostRegistration url body decoder =
    Http.request
        { method = "POST"
        , headers =
            [ header "Origin" "http://elm-lang.org"
            , header "Access-Control-Request-Method" "POST"
            , header "Access-Control-Request-Headers" "X-Custom-Header"
            ]
        , url = url
        , body = body
        , expect = Http.expectJson decoder
        , timeout = Nothing
        , withCredentials = False
        }


tryRegister : Form -> (Result Http.Error JsonProfile -> msg) -> Cmd msg
tryRegister form msg =
    let
        url =
            baseUrl ++ "register"

        body =
            encodeRegistration form |> Http.jsonBody

        request =
            tryPostRegistration url body profileDecoder
    in
        Http.send msg request

let configureCors (builder : CorsPolicyBuilder) =
    builder.WithOrigins("http://localhost:5000").AllowAnyMethod().AllowAnyHeader() |> ignore

let configureApp (app : IApplicationBuilder) =
    app.UseCors configureCors |> ignore
    app.UseGiraffe webApp

let configureServices (services : IServiceCollection) =
    ...
    services.AddCors |> ignore // Enables CORS

错误（Elm客户端）：

HTTP404:未找到-服务器未找到任何与 请求的URI（统一资源标识符）。（XHR）选项-

长颈鹿（服务器）：

tryPostRegistration : String -> Http.Body -> Decoder JsonProfile -> Http.Request JsonProfile
tryPostRegistration url body decoder =
    Http.request
        { method = "POST"
        , headers =
            [ header "Origin" "http://elm-lang.org"
            , header "Access-Control-Request-Method" "POST"
            , header "Access-Control-Request-Headers" "X-Custom-Header"
            ]
        , url = url
        , body = body
        , expect = Http.expectJson decoder
        , timeout = Nothing
        , withCredentials = False
        }


tryRegister : Form -> (Result Http.Error JsonProfile -> msg) -> Cmd msg
tryRegister form msg =
    let
        url =
            baseUrl ++ "register"

        body =
            encodeRegistration form |> Http.jsonBody

        request =
            tryPostRegistration url body profileDecoder
    in
        Http.send msg request

let configureCors (builder : CorsPolicyBuilder) =
    builder.WithOrigins("http://localhost:5000").AllowAnyMethod().AllowAnyHeader() |> ignore

let configureApp (app : IApplicationBuilder) =
    app.UseCors configureCors |> ignore
    app.UseGiraffe webApp

let configureServices (services : IServiceCollection) =
    ...
    services.AddCors |> ignore // Enables CORS

错误（Giraffe服务器）：

dbug:Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware 不支持选项请求

dbug:Giraffe.Middleware.giraffeiddleware[0] Giraffe返回了一些HTTP/1.1选项/寄存器

附录：

tryPostRegistration : String -> Http.Body -> Decoder JsonProfile -> Http.Request JsonProfile
tryPostRegistration url body decoder =
    Http.request
        { method = "POST"
        , headers =
            [ header "Origin" "http://elm-lang.org"
            , header "Access-Control-Request-Method" "POST"
            , header "Access-Control-Request-Headers" "X-Custom-Header"
            ]
        , url = url
        , body = body
        , expect = Http.expectJson decoder
        , timeout = Nothing
        , withCredentials = False
        }


tryRegister : Form -> (Result Http.Error JsonProfile -> msg) -> Cmd msg
tryRegister form msg =
    let
        url =
            baseUrl ++ "register"

        body =
            encodeRegistration form |> Http.jsonBody

        request =
            tryPostRegistration url body profileDecoder
    in
        Http.send msg request

let configureCors (builder : CorsPolicyBuilder) =
    builder.WithOrigins("http://localhost:5000").AllowAnyMethod().AllowAnyHeader() |> ignore

let configureApp (app : IApplicationBuilder) =
    app.UseCors configureCors |> ignore
    app.UseGiraffe webApp

let configureServices (services : IServiceCollection) =
    ...
    services.AddCors |> ignore // Enables CORS

此位表示“如果源站为，则允许跨源站请求。但是，您似乎在默认端口8000上使用

elm live

。因此，您的服务器实际上拒绝了来自端口8000的请求

长话短说，换成

http://localhost:8000

。如果这还不能解决问题，那么祈祷有实际F#知识的人能进一步提供帮助

---

---

此位实际上不会起任何作用-浏览器会自行设置这些标题。Elm的HTTP库使用浏览器的XMLHttpRequest实现，不允许XMLHttpRequest设置这些标题，因此它们将被忽略。列出了不允许覆盖的标题。

有时间再检查一点，在代码或应用程序中找不到任何路由带有选项路由的长颈鹿代码。在C#Asp.Net core中，我使用了：

    public IActionResult GetOptions()
    {
        Response.Headers.Add("Allow", "GET, OPTIONS, POST");
        return Ok();
    }

因此，我认为您需要在GET上添加如下内容：

route  "/options" >=> setHttpHeader "Allow" "GET, OPTIONS, POST"

---

我还没有尝试Giraffe，所以我无法测试这是否正确。

谢谢。我按照您的建议进行了更新。但是，我仍然收到相同的错误。您似乎正在使用cookie auth。您可能需要添加..AllowCredentials（）要根据配置CORS-我在使用Windows身份验证时必须这样做。另外-检查浏览器devtools网络选项卡（或Fiddler）中的飞行前请求和响应，并验证其是否符合（CORS的工作方式）。您尝试过不同的浏览器吗？