vue $http の get および post リクエストのクロスドメイン問題を解決する

Vue $http get および post リクエストのクロスドメイン問題

まずconfig/index.jsでproxyTableを設定します

 プロキシテーブル: {
      '/api':{
          // ターゲット:'http://jsonplaceholder.typicode.com',
          ターゲット: 'http://localhost:9080',
          変更元:true、

           パス書き換え:{
               '/api':''
           }
      }

ユーザー名とパスワードのログインフォーム送信

メソッド: {
// リクエストを取得 // submitForm() {
            // var formData = JSON.stringify(this.ruleForm);
            // this.$http.get('/api/amdatashift/login/probe').then(function(data){

            // }).catch(関数(){
            // console.log("サーバー例外");
            // });
            // }
  // 投稿リクエストsubmitForm() {
                 var formData = JSON.stringify(this.ruleForm);
                 this.$http.post('/api/amdatashift/login/user',{

                     ユーザー名:this.ruleForm.username、
                     パスワード:this.ruleForm.password
                 },{
                            エミュレートJSON:true
                        }).then(関数(データ){
                      コンソールにログ出力します。 
                 }).catch(関数(){
                     console.log("サーバー例外");
             });
             }
      }

注目すべき点:

1. 必ず {emulateJSON: true} を設定してください。そうしないと、クロスドメインが失敗します。

2. Chrome ブラウザでは、http://localhost:8080 (サーバーアプリケーションのアドレスではなく、Vue を起動するアドレス) が引き続き表示されます。クロスドメインが成功しているので、これが表示されても驚かないでください。

3. http リクエストには /api を含める必要があります。index.js のプロキシは /api を削除します。ブラウザでのアクセスアドレスは http://localhost:8080/api/amdatashift/login/user で、実際のアクセスアドレスは http://localhost:9080/amdatashift/login/user です。クロスドメインアクセスはプロキシを介して実現されます。

vue el-upload アップロードコントロールは、クロスドメインの問題を報告し続けます。POST リクエストは GET リクエストになります。

最近、Vue のアップロードを行っていたのですが、elmentui の el-upload コントロールを使用しました。その結果、常にいくつかの問題が発生しました。皆さんがこれらの落とし穴を回避できることを願っています。

では、早速スクリーンショットのコードを見てみましょう。

1.コントロールを移動してアクションアドレスを変更する

設定後、直接テストすると、エラーは次のようになります。

これにより、クロスドメインの問題が発生しますが、フロントエンドサービスを開発しており、ローカルマシン上のバックエンドサービスのポートが異なるため、これは理解できます。

Vue のクロスドメインの問題に関する情報と解決策を見つけて、プロキシをオンにします。

vue プロジェクトの設定で index.js ファイルを見つけて開き、次の情報を追加します。 changeOrigin が true であることに注意してください。これは、http://192.158.111.101:8000 を /api に置き換えることを意味します。例: 元のアドレスは「http://localhost:8000/ssmShow/upload」で、現在のアドレスは「/api/ssmShow/upload」です。

したがって、アップロードコントロールは次のように変更されます。

テスト、うーん。。。また間違ってる

まだクロスドメインエラーが報告されており、リクエストが2回行われ、リクエストに問題があります

ファイルのアップロードは依然として POST リクエストである必要がありますが、ここでは GET リクエストとオプションリクエストがあります。混乱した。 302 ステータスは変更されないので、まず 500 エラーに対処してください。

オプションリクエストの説明と処理方法はインターネット上に公開されています。私はそれに従って変更しました (方法は、フィルターを使用してリクエストをインターセプトして変更することです)。私はコードを貼り付けましたが、私のコードは Java の背景です。

フィルターを追加します。

同時に、web.xmlに次の内容を追加する必要があります。

変更後、Java バックグラウンドを再起動して emmm をテストします。。。次のように：

今回はインターフェースが 3 回呼び出されます。すごいですね。ただし、オプション要求が正しく返されたのは良いことです。オプション要求が正しく返されたため、要求は 3 回目に行われました。

3 番目のリクエストをよく見てみると、これは get リクエストです。添付ファイルのアップロードを get リクエストにするにはどうすればよいですか?

長い間ネットで検索しましたが、el-upload コントロールに問題があるとみんな言っていました。アクションが使えないので、ネット上の方法に従って、アクションに偽のアドレスを追加し、コントロールのアップロード前フック関数を直接改ざんしました。

axios の post リクエストを使用してファイルを直接送信します。

テストを続ける

3 番目のアップロードリクエストは依然として GET リクエストであり、これは問題です。el-upload のアクションに問題があるとしても、POST リクエストへの直接呼び出しが直接 GET リクエストになるのはなぜでしょうか。それから私は長い間探しました。兄からのリマインダーで知りました。

js または vue にエラーがある場合、 post リクエストは get リクエストに変換されます。すると、私の住所が間違っていたことに気づきました。

腹が立ちませんか？この場所にはスラッシュがないだけです。後で追加してテストしてください。

すべて正常です。リクエストは 1 つだけで、ファイルは正常にアップロードされています。悲しいけれど、それでもとても幸せです。

画像でマークしたアドレスに注目してください。ポートは 8080 で、「api」という単語があります。これはバックエンドの実際のアドレスではありません。これはプロキシアドレスです。彼はプロキシを介して私の実際のアドレスにアクセスできます。ですから、ポートまたはアドレスパスが間違っているからといって、間違っているとは思わないでください。これは正しいです。

上記は私の個人的な経験です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: