Problèmes avec Http Post malgré l'activation de CORS dans Elm et Giraffe

Question

J'ai eu du mal à activer les requêtes inter-domaines entre mon client Elm et un serveur Giraffe.

Elm (Client):

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 

erreur (client Elm):

Http404: INTROUVABLE - Le serveur n'a rien trouvé correspondant à l'URI demandé (Uniform Identificateur de ressource). (XHR) OPTIONS - http://localhost:5000/register

Giraffe (serveur):

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 

Erreur (serveur girafe):

DBUG: demandes Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware 1 OPTIONS ne sont pas pris en charge

dbug: Giraffe.Middleware.GiraffeMiddleware [0] La girafe revient Certains ned pour HTTP/1.1 OPTIONS/S'enregistrer

Annexe:

Elm Gateway (with CORS support)

Giraffe server (with CORS support)

Giraffe CORS sample project reference

Answer 1

Vous avez eu le temps de vérifier un peu plus et vous ne parvenez pas à trouver d'itinéraire dans votre code ou le code Giraffe avec un itinéraire d'options. En C# Asp.Net J'ai core utilisé:

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

Je pense que vous avez besoin d'ajouter quelque chose comme ceci sur GET:

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

I'v pas encore essayé de girafe, donc je n'ai pas été en mesure de tester si c'est correct.

Answer 2

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

ce bit dit « permettent l'origine croisée demande si l'origine est http://localhost:5000. Cependant, vous semblez utiliser elm-live sur le port par défaut, qui est 8000. Donc, effectivement, votre serveur refuse les demandes du port 8000.

Longue histoire courte, changer cela pour dire http://localhost:8000. Si cela ne résout pas, les doigts croisés quelqu'un avec la connaissance F # réelle peut aider davantage.

---

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

ce bit ne sera pas vraiment faire quoi que ce soit - le navigateur définit ces par lui-même. La bibliothèque HTTP d'Elm utilise l'implémentation XMLHttpRequest de votre navigateur, et XMLHttpRequest n'est pas autorisé à définir ces en-têtes, ils seront donc ignorés. https://fetch.spec.whatwg.org/#forbidden-header-namer liste les en-têtes que vous ne pouvez pas remplacer.