详解webpack-dev-server 设置反向代理解决跨域问题
网络编程 2021-07-04 17:33www.168986.cn编程入门
后端只负责接口,前端负责数据展示、逻辑处理。那么如何跨域?这篇文章主要介绍了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 = 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 () { }, suess: function (data) { }, error: function (error) { } });
上面ajax请求的时候proxy 代理就会自动转向target设置的接口路径http://localhost:80/index.php
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程