IntelliJスタティックWebプロジェクトからTomcatまたはAngular CORへ

Question

IntelliJ IDEAに静的Web角度プロジェクトがあります。静的ページはhttp://localhost:63342/Calculator/app/index.htmlに展開されます。私は戻って応答を取得するために、サーバーにいくつかのデータを投稿しようが、私は投稿しようとしたとき、私はこのエラーを取得する問題に遭遇している：ここで

XMLHttpRequest cannot load <url>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access. The response had HTTP status code 401. 

は私のポストの角度コードです：

WebIdServer.prototype.getId = function(id) { 
    var _this = this; 
    var request = { 
     method: 'POST', 
     url: 'https://<url>, 
     headers: { 
      'Authorization':'Bearer QWE234J234JNSDFMNNKWENSN2M3', 
      'Content-Type':'application/json', 
     }, 
     data: { 
      id:id 
     } 
    }; 
    _this.$log.debug(request); 
    return _this.$http(request) 
     .success(function(data, status, headers, config){ 
      _this.$log.debug("Successfull request."); 
      /*called for result & error because 200 status*/ 
      _this.uid = data.id; 
      _this.$log.debug(_this.uid); 
     }) 
     .error(function(data, status, headers, config){ 
      _this.$log.debug("Something went wrong with the request."); 
      _this.$log.debug(data); 
      /*handle non 200 statuses*/ 
     }); 
}; 

私は、私が別のポートで実行していたアプリケーションのローカルURLで試したので、ポストが動作するという事実を知っています。

私はlocalhostから投稿できないので、これをtomcatサーバーに配備することで問題が解決するかどうか疑問に思っていました。もしそうなら、この静的なWebプロジェクトをtomcatサーバーにどのように配備しますか？それが必要でないなら、私はこの問題をどうやって回避するのですか？

Answer 1

CORSにはいくつかの点があります。特定の電話をかけることができないというWebブラウザです。これはフロントエンドの問題にすぎません。サーバー上で実行されているスクリプトは、場所に関係なくすべてのAPIを呼び出すことができます。 3つの異なるオプション：

設定なし。同じホスト

フロントエンドのAJAXリクエストは、サーバーの設定がなければ、呼び出すサービスのドメインとポートの両方に一致する必要があります。あなたのケースでは、角度アプリhttp://localhost:63342もhttp://localhost:63342でホストされているサービスを呼び出す必要がありますし、あなたは甘いです。 CORSの問題はありません。

とサーバー側の構成。異なるホスト

APIが他の場所でホストされている場合は、APIホストを設定する必要があります。ほとんどのサーバーでは、特定のドメインがCORSブロックをバイパスできるように、アクセス制御を構成できます。電話をしようとしているサーバーにアクセスできる場合は、設定できるかどうかを確認してください。 enable CORSウェブサイトには、ほとんどのサーバーの例があります。通常これはかなりシンプルです。

プロキシ

これはあなたのTomcatのアイデアですを作成します。フロントエンドが別のサービスを呼び出す場合、CORSは問題になります。サーバースクリプトは、好きなものを呼び出すことができます。したがって、Tomcat（またはApache、またはNGINX、NodeJS ...）を使用して、リクエストを渡すスクリプトをホストすることができます。基本的には、APIの応答にAccess-Control-Allow-Origin: *を追加するだけです。

自分でTomcatを使用したことはありませんが、ここではblog postがあります。これには便利な情報があります。それをenable CORSの情報と組み合わせれば、どこにでも何かをルーティングすることができるはずです。

このプロセスは一般的です。 CORS anywhereのようなノードパッケージの人気を見てください。これはあなたのTomcatの機能です。

免責事項として、この考え方は、資格情報とトークンをどのように渡すことができるかによって異なります。盲目的に誰かのAPIをあなたの資格情報で呼ぶだけのサービスを作りたいとは思っていません。