详解webpack-dev-server 设置反向代理解决跨域问题


            一、设置代理的原因

现在对前端开发的要求越来越高，并且随着自动化以及模块化的诞生，前后端开发模式越来越流行。后端只负责接口，前端负责数据展示、逻辑处理。但是前后端开发模式，有一个重要的问题，就是跨域问题。

 二、如何配置webpack的代理

webpack代理需要另外一个插件：webpack-dev-server 

webpack-dev-server配置代理非常的方便，只需要条件一个proxy属性，然后配置相关的参数就可以了：





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

      }

    }

  } 

..........

};



上面实例中我们把本地的端口号设置为了：8088，如果这个时候接口放在了端口为80的服务器上，并且我们请求的接口url如下：http://localhost:80/index.php

 这个时候只需要在proxy使用正则表达式匹配/index.php,然后 匹配到 转向target设置的目标接口；这个时候使用ajax请求接口就不要写上目标接口的域名，只需要写上index.php就可以了。





 $.ajax({

    type: 'GET',

    url: '/index.php',

    data: {},

    dataType: 'json',

    beforeSend: function () {

    },

    success: function (data) {



    },

    error: function (error) {



    }

  });







上面ajax请求的时候proxy 代理就会自动转向target设置的接口路径：http://localhost:80/index.php

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。