本文介绍如何利用webpack-dev-server配置反向代理解决前后端分离开发中的跨域问题。通过设置proxy属性，将本地请求指向后端服务器，简化前端开发流程，无需在AJAX请求中指定完整域名。
设置代理的原因
一、设置代理的原因
当前前端开发标准不断提升，随着自动化构建与模块化理念的普及，前后端分离的开发模式日益成为主流。在这种模式下，后端专注于提供数据接口，而前端则负责数据展示与业务逻辑处理。然而，这种分离式开发带来了一个关键挑战，即跨域访问限制问题。
如何配置webpack的代理
二、如何配置webpack的代理
要实现webpack的代理功能，需要借助webpack-dev-server这一开发服务器插件。
配置webpack-devserver的代理功能十分便捷，只需在配置文件中添加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。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。