詳解webpack-dev-server 設(shè)置反向代理解決跨域問題

更新時間：2018年04月18日 09:39:13 作者：沐雨橙風丶

后端只負責接口，前端負責數(shù)據(jù)展示、邏輯處理。那么如何跨域？這篇文章主要介紹了webpack-dev-server 設(shè)置反向代理解決跨域問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、設(shè)置代理的原因

現(xiàn)在對前端開發(fā)的要求越來越高，并且隨著自動化以及模塊化的誕生，前后端開發(fā)模式越來越流行。后端只負責接口，前端負責數(shù)據(jù)展示、邏輯處理。但是前后端開發(fā)模式，有一個重要的問題，就是跨域問題。

二、如何配置webpack的代理

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

webpack-dev-server配置代理非常的方便，只需要條件一個proxy屬性，然后配置相關(guān)的參數(shù)就可以了：

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', //設(shè)置端口號
    //其實很簡單的，只要配置這個參數(shù)就可以了
    proxy: {
      '/index.php': {
        target: 'http://localhost:80/index.php',
        secure: false
      }
    }
  } 
..........
};

上面實例中我們把本地的端口號設(shè)置為了：8088，如果這個時候接口放在了端口為80的服務(wù)器上，并且我們請求的接口url如下：http://localhost:80/index.php

這個時候只需要在proxy使用正則表達式匹配/index.php,然后匹配到轉(zhuǎn)向target設(shè)置的目標接口；這個時候使用ajax請求接口就不要寫上目標接口的域名，只需要寫上index.php就可以了。

 $.ajax({
    type: 'GET',
    url: '/index.php',
    data: {},
    dataType: 'json',
    beforeSend: function () {
    },
    success: function (data) {

    },
    error: function (error) {

    }
  });

上面ajax請求的時候proxy 代理就會自動轉(zhuǎn)向target設(shè)置的接口路徑：http://localhost:80/index.php

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: