Axioの横断問題

AXIOのドメイン横断問題
1、技術概要
1、ドメインをまたぐ：ブラウザが他のサイトのスクリプトを実行できないということです。これはブラウザの同ソース戦略によってもたらされたもので、ブラウザがjavascriptに対して与えるセキュリティ制限です。2、国境を越える問題が発生し、前後に分離されたプロジェクトを開発し、Spring Boot+Vueを使って開発する時、バックグラウンドコードはサーバーで起動し、フロントコードは別のコンピュータで起動し、この時問題が発生します。例えば、バックグラウンドアドレスはhttp://192.168.70.77:8081 フロントの住所はhttp://192.168.70.88:8080 この時、ipとポート番号が一致せず、同一ソースポリシーに合致しないため、ドメインをまたぐ問題が発生します。
2、技術詳述
1：サーバー側にクロスドメインを設定する

    header(“Access-Control-Allow-Origin:*”);   
    header(“Access-Control-Allow-Headers:content-type”);  
    header(“Access-Control-Request-Method:GET,POST”);    

2：プロキシを自分で設定して、proxyTableを使うことができます。まずconfig/index.jsの中でproxyTableを見つけて、中に参加します。

    proxyTable: {
        '/api': {
          target: 'http://129.204.247.165/',
          changeOrigin:true,
          pathRewrite: {
            '^/api': 'http://129.204.247.165/'
          },
        }
    },

この中に注意してください。これはあなたがカスタマイズしたものです。何でもいいです。targetはあなたが呼び出したインターフェースのドメイン名とポート番号を設定します。ここでは、targetのアドレスの代わりに‘^/appi’を使って理解しています。後ろのコンポーネントの中でインターフェースを調整する時は直接appiを使って代用します。例えば私が呼び出したいですhttp://129.204.247.165/posts'は直接'/appi/posts'と書けばいいです。それから、私たちはmain.jsで基本的なパスを設定してもいいです。そうすると、インタフェースを呼び出すときは、apiを書かずに直接にインターフェースの名前を書いてもいいです。以下は使用例です。

    this.$axios({
        method: 'post',
        url: '/api/comments',
        data:this.$qs.stringify(d),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
      }).then(function (res) {
        console.log(res)
      })

3、技術使用中に発生した問題と解決過程
よくあるクロスドメイン問題の原因：1、vueプロジェクトはESLintをインストールしました。'err'is defined but never used(no-unused-vars)が現れました。
暴力解決：直接ESLINEをオフにして、package.jsonファイルに「rules」を追加します。「「"generator-star-spacing」：「off」、「no-tabs」：「off」、「no-unused-vars」：「no-consone」：「off」、「norr-inglarbudeft」：「partoff」
2、ESLINEをオフしてからまだクロスドメインの問題がある場合、上記の2つの方法で解決できます。a、サーバ端にクロスドメイン（第2点技術詳細参照）bを設置し、フロントエンドにプロキシサーバーを設置します。（第2点技術詳細参照）
3、設定が完了したら、サービスを再開し、データに再アクセスする必要があります。
4、まとめ
クロスドメイン問題の解決方法は2つありますが、バックエンドの解決方法を使うのは仕事量が少ないと提案しています。
5、参考文献、参考ブログ
阮一峰のブログvue 2.0/3.0クロスドメイン解決方案