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


Posted in Javascript onApril 18, 2018

一、设置代理的原因

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

 二、如何配置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 () {
    },
    success: function (data) {

    },
    error: function (error) {

    }
  });

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
新发现一个骗链接的方法(js读取cookies)
Jan 11 Javascript
JS分页效果示例
Oct 11 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
Javascript中神奇的this
Jan 20 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
node中Express 动态设置端口的方法
Aug 04 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 #jQuery
vue双向数据绑定知识点总结
Apr 18 #Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 #Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 #Javascript
JS实现二维数组横纵列转置的方法
Apr 17 #Javascript
redux中间件之redux-thunk的具体使用
Apr 17 #Javascript
Vue进度条progressbar组件功能
Apr 17 #Javascript
You might like
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
js+css在交互上的应用
2010/07/18 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue项目设置scrollTop不起作用(总结)
2018/12/21 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
Python脚本实现集群检测和管理功能
2015/03/06 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Python标准库shutil用法实例详解
2018/08/13 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
北京麒麟网信息技术有限公司网络游戏测试面试题
2013/09/28 面试题
建筑专业毕业生推荐信
2013/11/21 职场文书
工作年限证明范本
2015/06/15 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
《游戏王:大师决斗》新活动上线 若无符合卡组可免费租用
2022/04/13 其他游戏