用webpack-dev-server开发时代理，决解开发时跨域问题

Posted 2020-10-12 南夏de博客

一、设置代理的原因

现在对前端开发的要求越来越高，并且随着自动化以及模块化的 诞生，前后端开发模式越来越流行。后端只负责接口，前端负责数据展示、逻辑处理。但是前后端开发模式，有一个重要的问题，就是跨域问题。

 

实例一

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