用webpack-dev-server開發時代理，決解開發時跨域問題

1、設置代理的緣由

如今對前端開發的要求愈來愈高，而且隨着自動化以及模塊化的 誕生，先後端開發模式愈來愈流行。後端只負責接口，前端負責數據展現、邏輯處理。可是先後端開發模式，有一個重要的問題，就是跨域問題。

 

實例一

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