一、设置代理的原因
现在对前端开发的要求越来越高，并且随着自动化以及模块化的 诞生，前后端开发模式越来越流行。后端只负责接口，前端负责数据展示、逻辑处理。但是前后端开发模式，有一个重要的问题，就是跨域问题。
实例一
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
实例二
需要webpack，webpack-dev-server
npm install webapck webpack-dev-server --save-dev
设置时
devServer: { ???????historyApiFallback: true, ?????????hot: true, ???????inline: true, ???????stats: { colors: true }, ???????proxy: { ???????????‘/list‘: { ?????????????target: ‘https://api.github.com‘, ?????????????pathRewrite: {‘^/column‘ : ‘/column‘}, ?????????????changeOrigin: true ???????????} ????????} ???},这段代码就是将 ‘/list‘ 通过本地开发服务器webpack-dev-server转发到 ‘https://api.github.com‘
参考文件：
http://www.cnblogs.com/liuchuanfeng/p/6802598.html
http://www.jb51.net/article/120259.htm
http://www.cnblogs.com/fengnovo/p/5983638.html
用webpack-dev-server开发时代理，决解开发时跨域问题
原文地址：http://www.cnblogs.com/ourLifes/p/7765797.html