一、設置代理的原因
現在對前端開發的要求越來越高，并且隨著自動化以及模塊化的誕生，前后端開發模式越來越流行。后端只負責接口，前端負責數據展示、邏輯處理。但是前后端開發模式，有一個重要的問題，就是跨域問題。
二、如何配置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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
