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

今回は、vue-cli でクロスドメインリクエストを行う方法について説明します。vue-cli でクロスドメインリクエストを行う際の注意点は何ですか? 以下は実際のケースです。 z

フロントエンド開発中、バックエンド インターフェイスへのリクエストをクロスドメインにする必要があることがよくあります。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 サイトの他の関連記事に注目してください。

推奨読書:

サーバーサイドレンダリング用のVue+Nuxt.js

GoogleがリリースしたJSコード記述仕様について

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