クロスドメイン Webpack 開発環境のサンプル チュートリアル

この記事は主にvue-cli webpackのクロスドメイン開発環境の詳細な説明を紹介していますが、編集者が非常に優れていると思ったので、参考として共有します。エディターに従って見てみましょう

config/index.js の dev.proxyTable オプションを編集します。開発サーバーはプロキシ処理に http-proxy-middleware を使用しています

クロスドメインの問題を解決するには、通常、

1. は Jsonp を使用しますが、 jsonp は get リクエストのみにすることができます。

2. または CORS サポートを使用し、Access-Control-Allow-Origin を設定します: *

0 前提条件のスキル

vue-loader と webpack に精通していること

1 基本構成

confix を編集する/index .js ファイル開発サーバーは http-proxy-middleware を使用してプロキシを行います

// config/index.js
module.exports = {
 // ...
 dev: {
  proxyTable: {
   // proxy all requests starting with /api to jsonplaceholder
   '/api': {
    target: 'http://jsonplaceholder.typicode.com',
    changeOrigin: true,
    pathRewrite: {
     '^/api': ''
    }
   }
  }
 }
}

上記の例では、リクエスト /api/posts/1 を http://jsonplaceholder.typicode.com/posts/1 にプロキシします。

2 グローバル マッチング

リクエストをプロキシする必要があるかどうかを決定するカスタム関数となるフィルター オプションを提供できます:

ルーティング ルールとルーティング メソッドを定式化するフィルターを提供します。

proxyTable: {
 '*': {
  target: 'http://jsonplaceholder.typicode.com',
  filter: function (pathname, req) {
   return pathname.match('^/api') && req.method === 'GET'
  }
 }
}

【関連おすすめ】

Javascriptの無料ビデオチュートリアル

2.Bootstrapフォーム検証formValidationの詳細な例

3.JSのOffsetWidthバグと処理メソッド

4.詳細複数の名前をチェックする例の説明

easyUI ドロップダウン リストのクリック イベントの例の詳細な説明

以上がクロスドメイン Webpack 開発環境のサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。