一、設置代理的原因
現在對前端開發的要求越來越高，並且隨着自動化以及模塊化的 誕生，前后端開發模式越來越流行。后端只負責接口，前端負責數據展示、邏輯處理。但是前后端開發模式，有一個重要的問題，就是跨域問題。
實例一
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