Http Post的问题，尽管在Elm和Giraffe中都启用了CORS

Question

我一直在努力在我的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

错误（榆树客户端）：

HTTP404：未找到 - 服务器未找到与 请求的 URI（统一资源标识符）。（XHR）选项- http://localhost:5000/register

长颈鹿（服务器）：

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

错误（长颈鹿服务器）：

dbug： Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware1 不支持选项请求

dbug： 长颈鹿中间件

.长颈鹿中间件[0] 长颈鹿返回了一些 HTTP/1.1 选项/register

附录：

Elm Gateway（支持 CORS）

长颈鹿服务器（支持CORS）

长颈鹿CORS样本项目参考

Answer 1

有时间检查更多，在您的代码或带有选项路由的长颈鹿代码中找不到任何路由。在 C# Asp.Net 核心中，我使用了：

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

所以我认为你需要在 GET 上添加这样的东西：

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

我还没有尝试过长颈鹿，所以我无法测试这是否正确。

Answer 2

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

此位表示"如果源 http://localhost:5000，则允许跨源请求。但是，您似乎在默认端口（8000）上使用elm-live。如此有效地，您的服务器拒绝了来自端口 8000 的请求。

长话短说，改成http://localhost:8000.如果这不能解决它，手指交叉具有实际 F# 知识的人可以进一步提供帮助。

---

headers =
    [ header "Origin" "http://elm-lang.org"
    , header "Access-Control-Request-Method" "POST"
    , header "Access-Control-Request-Headers" "X-Custom-Header"
    ]

这个位不会真正做任何事情 - 浏览器自己设置这些。Elm 的 HTTP 库使用浏览器的 XMLHttpRequest 实现，并且 XMLHttpRequest 不允许设置这些标头，因此它们将被忽略。https://fetch.spec.whatwg.org/#forbidden-header-namer 列出了不允许覆盖的标头。