Question

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

榆树（客户）：

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.StaticFileMiddleware 1         不支持OPTIONS请求

dbug：Giraffe.Middleware.GiraffeMiddleware [0]         长颈鹿为HTTP / 1.1 OPTIONS / register
返回了一些

附录

Elm Gateway (with CORS support)

Giraffe server (with CORS support)

Giraffe CORS sample project reference

Answer 1

有时间检查一下，在代码或带有选项路线的Giraffe代码中找不到任何路线。在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，则允许交叉原始请求。但是，您似乎在默认端口上使用elm-live，即8000.实际上，您的服务器拒绝请求从港口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列出了您不允许覆盖的标题。

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

2 个答案: