フロントエンドスパフレームが表示されているので、前端と後端が開発分離されています。私たちは、必然的にクロスドメインの開発で問題が発生します。この問題を解決するためのクロスドメインの方法は、基本的にサーバー側の実装です。Javaへ、例えば、私は、クロスドメインに対処するための3つの方法があることを知っています:
1.使用 @CrossOrigin 注解对每一个接口进行跨域处理,缺点是比较麻烦
@CrossOrigin(原点= "*" ) @RequestMapping(値 = "/試験"、メソッド= RequestMethod.GET) パブリック文字列試験(){ リターン "テスト" ; }
入口クラス内のすべてのインターフェイスの2 @CrossOriginクロスドメイン処理
@CrossOrigin(原点= "*" ) @RestController @SpringBootApplication パブリック クラスSpringBootCorsTestApplication { // *** }
3.構成は、クラスへのすべてのクロスドメインのインターフェイスの処理を加えてもよいです
@Configuration パブリック クラス WebMvcConfigは拡張WebMvcConfigurerAdapter { @Override 公共 のボイドaddCorsMappings(CorsRegistryレジストリ){ registry.addMapping( "/ **" ) .allowedOrigins( "*" ) .allowedMethods( "POST"は、 "GET"、 "PUT"を、 "OPTIONS"、 "削除" ) .maxAge( 3600 ) .allowCredentials(真)。 } }
しかし...彼らはnginxの線でクロスドメインのコード、統一されたコンフィギュレーションクロスドメインプロセスに対処していない私たちのプロジェクトチームのバックエンドは...私たちはVUEのフロントエンドを使用し、VUEの構成が起因して、クロスドメインプロセスの開発のためであります、我々は違いが異なってくるではない私たちのために私たちのプロジェクトの特殊性、(私たちは別のサーバー上で実行するコードのセットを展開する、少なくとも3つのフロントのセットとリア側のコードが異なっていて、私たちはgitlabでブランチを管理する機関を解決引き出さフロントエンドのコードはでプレイする、またはこのコードと伝えることができなかった愚かな設定を見つけるように構成されますとき、このような異なる背景APIインタフェースアドレスとしてコードのバージョンを設定し、我々はただ、このサブプロセスは非常に良いではありません建物を開始し、我々は、フロントエンドに持っています場合にのみ、建物のコードをビルドするためのプロジェクトのフロントエンドコードと構成の完全な分離、コードと構成は、2つのgitlab倉庫を設置している、構成がデプロイメント時に、特定の環境に適したスクリプトに置き換えられます、私はと少し似てパッチを適用した猿のように感じますこれは、バックエンドのJavaコードの同じセットが実行を実行する別のコマンドと異なる構成を読んで達成されます )バルク設定のnignx自身の理解では、クロスドメインの取り扱いにローカルプロキシ転送nginxの、とnginxの経由要求を行うことができます
サーバー{ 聞く 9090 ; サーバー名はlocalhost。 場所 / { はadd_header「アクセス制御-許可-起源」$ http_origin。 add_header 'GET、POST、OPTIONS' 'アクセス制御-メソッド許可' 。 add_header「アクセス制御は許ヘッダ」「*」; もし($のREQUEST_METHOD = "OPTIONS" ){ はadd_header 'アクセス制御-許可-起源' $ http_origin。 add_header 'GET、POST、OPTIONS' 'アクセス制御-メソッド許可' 。 add_header "; add_header 'のContent-Length' 0 ; add_header 'Content-Typeの' 'text / plainの、文字セット= UTF-8' ; 返し 204 ; } proxy_passのhttp://192.168.0.3 :9999。 } #location / aepreservation { #1 #1はadd_header 'アクセス制御-許可原点' $ http_origin。 #1はadd_header 'GET、POST、OPTIONS' 'アクセス制御は-メソッド許可' 。 #1はadd_header「アクセス制御は許ヘッダ」「*」; # もし($のREQUEST_METHOD = "OPTIONS" ){ #1はadd_header 'アクセス制御-許可-起源' $ http_origin。 #1はadd_header 'GET、POST、OPTIONS' 'アクセス制御は-メソッド許可' 。 #1はadd_header「アクセス制御は許ヘッダ」「*」; #1はadd_header 'のContent-Length' 0 ; #1はadd_header 'Content-Typeの' 'text / plainの、文字セット= UTF-8' ; #の リターン 204 ; #} #1 proxy_http_version 1.1 。 #は、$ http_upgradeアップグレードproxy_set_header。「アップグレード」。 #proxy_passます。http://192.168.0.3 :9999; #} }
nginxのローカルポート9090のすべてのポートを監視し、(対応するバックエンドサービスに転送する場合http://192.168.0.3:9999/api/*のためのあなたのバックオフィスサービス、限り、当社のフロントエンドプロキシアクセスはhttpのアドレス:localhostを:9090 / API / *その上に、私のコメントの場所の下に注意を払うプロキシのWebSocketの方法であり、パスは/ aepreservationですが、私は(頭痛を見て定期的に)怠惰にした、トップコンフィギュレーションをコピーし、ningx、陽性によって判断されます私はこのような長いったらしいを記述する必要はありませんとして、処理されるのWebSocketを決定するための唯一の道