vue-cli がクロスドメインリクエストを行う方法

今回は、vue-cli がクロスドメインリクエストを行う方法について説明します。vue-cli がクロスドメインリクエストを行う際の 注意事項 について説明します。実際のケースを見てみましょう。

フロントエンド開発中は、バックエンド

インターフェース へのリクエストをクロスドメインにする必要があることがよくあります。vue-cli を使用してクロスドメイン リクエストを実装するには、config/index.js を開いて次の内容を変更するだけです。

//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
  dev:{
    proxyTable:{
      '/api':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/api': ''
        }
      }
    }
  }
}

このとき、クロスドメインリクエストを実現するためにリクエストしたいインターフェースのURLに/api/look/1と入力します。

この時点で F12 を開くと、リクエストされた URL が localhost:8080/api/look/1 であることがわかります。これは実際にはローカルからのデータの仮想リクエストであるため、クロスドメインの問題は発生しません。 。

通常の状況では、上記の方法で問題ありません。上記の方法が機能しない場合は、次のように記述してみてください:

//例如要请求的接口url为http://172.3.2.1:8000/look/1
module.exports = {
  dev:{
    proxyTable:{
      '/look':{
        target: 'http://172.3.2.1:8000',
        changeOrigin: true,
        pathRewrite: {
         '^/look': '/look'
        }
      }
    }
  }
}

このとき、必要なインターフェイスの URL に /look/1 と入力します。クロスドメインリクエストを実現するためにリクエストします。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS は HTML タグを動的に操作します

JS を使用して入力テキスト ボックスのコンテンツを操作します

以上がvue-cli がクロスドメインリクエストを行う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。