详解webpack-dev-server 设置反向代理解决跨域问题
一、设置代理的原因
现在对前端开发的要求越来越高,并且随着自动化以及模块化的诞生,前后端开发模式越来越流行。后端只负责接口,前端负责数据展示、逻辑处理。但是前后端开发模式,有一个重要的问题,就是跨域问题。
二、如何配置webpack的代理
webpack代理需要另外一个插件:webpack-dev-server
webpack-dev-server配置代理非常的方便,只需要条件一个proxy属性,然后配置相关的参数就可以了:
varwebpack=require('webpack'); varWebpackDevServer=require("webpack-dev-server"); varpath=require('path'); varCURRENT_PATH=path.resolve(__dirname);//获取到当前目录 varROOT_PATH=path.join(__dirname,'../');//项目根目录 varMODULES_PATH=path.join(ROOT_PATH,'./node_modules');//node包目录 varBUILD_PATH=path.join(ROOT_PATH,'./dist');//最后输出放置公共资源的目录 varHtmlWebpackPlugin=require('html-webpack-plugin'); varExtractTextPlugin=require("extract-text-webpack-plugin"); varCopyWebpackPlugin=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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。