Verwendung von Cors über zwei unabhängig voneinander laufende lokale Anwendungen

Question

Ich habe zwei Anwendungen laufen unabhängig, eine kümmert sich um mein Backend (geschrieben in Scala Play) dann andere ist mein Frontend (Angular mit einem statischen Node-Server).

Ich versuche Daten über mein Frontend über ein Formular von meiner Scala Play App anzufordern.

this.insertionOrder = function(){ 
      $http({ 
      method: 'POST', 
      url: '//localhost:9000/insertsupplier', 
      header: { 
       'Content-type': 'application/json', 
       'Access-Control-Allow-Origin' : '*', 
       'Access-Control-Allow-Methods' : 'POST, GET, OPTIONS' 
      }, 
      data:{ 
       'supplier_id': 1, 
       'suppliername': 'xxx', 
       'supplier_address': 'xxx xxx xxx xxx', 
       'contact': 'xxx@xxx.com', 
       'datecreated': '2017-10-15T09:45:00.000UTC+00:00' 
      } 
      }).then(function(response){ 
      console.log(response); 
      return response.data 
      }, function(err){ 
      console.log(err) 
      }); 
     }; 

und mein Spiel App wie folgt aussieht:

Controller:

def insertsupplier = Action(parse.json) { implicit request => 
    val json = request.body 
    val sup: Supplier = json.as[Supplier] 
    sup.insertSql(con) 
    Ok("test") 
    } 

meine build.sbt enthält Filter:

libraryDependencies ++= Seq(
    cache , 
    ws, 
    jdbc, 
    filters 
) 

und die MyFilters.scala

class MyFilters (implicit inj:Injector) extends HttpFilters with Injectable { 
    implicit val as = inject[ActorSystem] 
    implicit val mat = ActorMaterializer() 
    val gzip = new GzipFilter() 
    val csrf = inject[CSRFFilter] 
    val cors = inject[CORSFilter] 
    //println(s"csrf: ${csrf.tokenProvider}") 
    //println(s"csrf: ${csrf.tokenProvider.generateToken}") 
    def filters = Seq(gzip,cors,csrf) 
} 

und schließlich meine application.conf

play.filters.cors { 
    pathPrefixes = ["*"] 
    allowedOrigins = ["http://localhost:3000","https://localhost:3000","http://localhost:3000/*","https://localhost:3000/*"] 
    allowedHttpMethods = ["GET", "POST", "OPTIONS"] 
    allowedHttpHeaders = ["Accept"] 
# preflightMaxAge = 1 hour 
} 

play.filters.csrf { 
    cookie.name = "XSRF-TOKEN" 
    header.name = "X-XSRF-TOKEN" 
} 

play.http.filters = "filters.MyFilters" 

Ich erhalte den Fehler "XMLHttpRequest cannot load http://localhost:9000/insertsupplier. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500."

Ich fühle, dass zuerst falsch mein CORS Setup ohnehin ->Was geändert werden muss? Ich bin neu dazu.

Und kann ich sogar cors verwenden, um auf Daten von localhost zuzugreifen?

Answer 1

Es kann sein, dass es mit Ihrem CORS-Setup überhaupt nichts falsch ist, weil der zeigt Teil der Fehlermeldung „Die Antwort HTTP-Statuscode 500 hatte“, dass die tatsächliche unmittelbare Problem ist, dass ein OPTIONS Anfrage an Ihren Server verursachte einige unerwartete Fehler auf der Serverseite.

Von den Codefragmenten in der Frage aus ist es nicht möglich zu sagen, was den 500 Fehler auf der Serverseite verursachen könnte. Es ist möglicherweise völlig unabhängig von Ihrer CORS-Konfiguration.

Aber unabhängig davon sollten Sie die Teile Ihres Frontend-Codes löschen, die die Header 'Access-Control-Allow-Origin' : '*' und 'Access-Control-Allow-Methods' hinzufügen. Diese Header sind Antwort Header, die von der Serverseite gesendet werden müssen, nicht vom Frontend-Code.

Aber der 'Content-type': 'application/json' Teil Ihres Frontend-Codes ist gültig, und vorausgesetzt, es ist tatsächlich notwendig, um die erwartete Antwort vom Server zu erhalten, gibt es keine Möglichkeit, Ihre Anfrage zu stellen, ohne Browser zu veranlassen, a CORS preflight OPTIONS request zu tun.

Aber wenn die CORS Preflight OPTIONS Anfrage fehlschlägt, kommt der Browser nie um die POST Anfrage versuchen Ihren Code tatsächlich versucht zu senden. Und wenn Ihr Back-End auf diese OPTIONS Anfrage mit einer Antwort von 500 reagiert, schlägt das Preflight fehl. Es muss stattdessen mit einem 200 oder 204 antworten.