详解webpack-dev-server 设置反向代理解决跨域问题

前端之家收集整理的这篇文章主要介绍了详解webpack-dev-server 设置反向代理解决跨域问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_404_1@一、设置代理的原因

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

@H_404_1@二、如何配置webpack的代理

webpack代理需要另外一个插件:webpack-dev-server

webpack-dev-server配置代理非常的方便,只需要条件一个proxy属性,然后配置相关的参数就可以了:

获取到当前目录 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就可以了。

PHP',data: {},dataType: 'json',beforeSend: function () { },success: function (data) {
},error: function (error) {

}

});

上面ajax请求的时候proxy 代理就会自动转向target设置的接口路径:http://localhost:80/index.PHP

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章