vue-cli がクロスドメインリクエストを行う方法-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-05-02 10:28:10

オリジナル

1529 人が閲覧しました

今回は、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 サイトの他の関連記事を参照してください。