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 を使用して Number 型配列の最大要素を見つける方法

vue-router を初めてロードするときに、多すぎるリソースが原因で速度が低下する場合の対処方法遅延読み込み

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