独立した2つのローカルアプリケーションに共通のコードを使用する

Question

私はバックエンド（Scala Playで書かれています）と私のフロントエンド（静的ノードサーバでの角度）の2つのアプリケーションを独立して実行しています。

自分のフロントエンドで、Scala Playアプリのフォームからデータをリクエストしようとしています。

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) 
      }); 
     }; 

と私のプレイアプリは次のようになります。

コントローラー：

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

私build.sbtは、フィルタが含まれています

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

と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) 
} 

、最終的には私の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" 

私はエラーに"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."

を得続ける私が最初に私のCORS設定がとにかく間違っていることを感じて - >変更する必要がありますか？これは初めてのことです。

また、ローカルホストからデータにアクセスするためにcorsを使用することもできますか？

Answer 1

それはは、「応答がHTTPステータスコードを持っていた500」ため、エラーメッセージの一部は、実際の当面の問題は、あなたにそのOPTIONS要求であることを示し、何も悪いことは、あなたのCORS設定では全くありませんということかもしれサーバー側で予期せぬ障害が発生しました。

質問のコードスニペットだけでは、サーバー側で何が原因で500の障害が発生しているのかを知ることはできません。 CORSの設定とは完全に無関係かもしれません。

ただし、フロントエンドコードのうち、ヘッダ'Access-Control-Allow-Origin' : '*'と'Access-Control-Allow-Methods'を追加する部分を削除する必要があります。これらのヘッダーはの応答ヘッダーで、フロントエンドコードからではなくサーバー側から送信する必要があります。

フロントエンドコードの一部が有効で、サーバーから期待される応答を得るために実際に必要であると仮定すると、ブラウザを起動せずにリクエストできるようにはなりません。a CORS preflight OPTIONS request

CORSプリフライトOPTIONSリクエストが失敗した場合、ブラウザは実際にコードが送信しようとしているPOSTリクエストを試みることはありません。そして、あなたのバックエンドがその応答に500応答のOPTIONSリクエストに応答すると、プリフライトは失敗します。代わりに200または204で応答する必要があります。