详解webpack-dev-server设置反向代理解决跨域问题
⼀、设置代理的原因
现在对前端开发的要求越来越⾼，并且随着⾃动化以及模块化的诞⽣，前后端开发模式越来越流⾏。后端只负责接⼝，前端负责数据展⽰、逻辑处理。但是前后端开发模式，有⼀个重要的问题，就是跨域问题。
⼆、如何配置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 = solve(__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");webserver接口开发
var CopyWebpackPlugin = require('copy-webpack-plugin');
//项⽬的⽂件夹可以直接⽤⽂件夹名称默认会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: "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: 'localhost:80/index.php',
secure: false
}
}
}
..........
};
这个时候只需要在proxy使⽤正则表达式匹配/index.php，然后匹配到转向target设置的⽬标接⼝；这个时候使⽤ajax请求接⼝就不要写上⽬标接⼝的域名，只需要写上index.php就可以了。
$.ajax({
type: 'GET',
url: '/index.php',
data: {},
dataType: 'json',
beforeSend: function () {
},
success: function (data) {
},
error: function (error) {
}
});
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。