Comment configurer un proxy inverse à l'aide de Webpack

Cette fois, je vais vous montrer comment utiliser webpack pour configurer un proxy inverse, et quelles sont les précautions à prendre pour utiliser webpack pour configurer un proxy inverse. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Raisons de la mise en place d'un proxy

De nos jours, les exigences en matière de développement front-end sont de plus en plus élevées, et avec le Naissance de l'automatisation et de la modularisation , le modèle de développement front-end et back-end devient de plus en plus populaire. Le backend est uniquement responsable de l'interface et le frontend est responsable de l'affichage des données et du traitement logique. Cependant, il existe un problème important dans le modèle de développement front-end et back-end, à savoir le problème inter-domaines.

2. Comment configurer le proxy webpack

Le proxy webpack nécessite un autre plug-in : webpack-dev-server

webpack -dev-server est très pratique pour configurer le proxy. Il vous suffit de conditionner un attribut proxy puis de configurer les paramètres pertinents :

var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  //项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字
  entry: {
    app: ['./src/js/index.js'],
    vendors: ['jquery', 'moment'], //需要打包的第三方插件
    // login:['./src/css/login.less']
  },
  //输出的文件名,合并以后的js会命名为bundle.js
  output: {
    path: path.join(__dirname, "dist/"),
    publicPath: "http://localhost:8088/dist/",
    filename: "bundle_[name].js"
  },
  devServer: {
    historyApiFallback: true,
    contentBase: "./",
    quiet: false, //控制台中不输出打包的信息
    noInfo: false,
    hot: true, //开启热点
    inline: true, //开启页面自动刷新
    lazy: false, //不启动懒加载
    progress: true, //显示打包的进度
    watchOptions: {
      aggregateTimeout: 300
    },
    port: '8088', //设置端口号
    //其实很简单的，只要配置这个参数就可以了
    proxy: {
      '/index.php': {
        target: 'http://localhost:80/index.php',
        secure: false
      }
    }
  } 
..........
};

Dans l'exemple ci-dessus, nous définissons le numéro de port local. à : 8088. Si A ce moment, l'interface est placée sur le serveur avec le port 80, et l'URL de l'interface que nous demandons est la suivante : http://localhost:80/index.php

A ce moment , il suffit d'utiliser la correspondance d'expression régulière dans proxy/index.php, puis de faire correspondre l'interface cible définie par la cible de redirection lors de l'utilisation de l'interface de requête ajax, n'écrivez pas le nom de domaine de l'interface cible, écrivez simplement l'index ; .php.

 $.ajax({
    type: 'GET',
    url: '/index.php',
    data: {},
    dataType: 'json',
    beforeSend: function () {
    },
    success: function (data) {
    },
    error: function (error) {
    }
  });

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment trier les objets json et supprimer des données avec le même identifiant

Comment exécuter mvvm dans projets réels - liaison bidirectionnelle simple

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!