详解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 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
JavaScript中三种异步上传文件方式
Mar 06 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
jQuery中的select操作详解
Nov 29 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
用vue构建多页面应用的示例代码
Sep 20 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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设计模式 Facade(外观模式)
2011/06/26 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
bootstrap-treeview自定义双击事件实现方法
2016/01/09 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
2016/06/12 Javascript
input框中的name和id的区别
2016/11/16 Javascript
jquery插件bootstrapValidator表单验证详解
2016/12/15 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
JS typeof fn === 'function' && fn()详解
2020/08/22 Javascript
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
自定义Django Form中choicefield下拉菜单选取数据库内容实例
2020/03/13 Python
浅析关于Keras的安装(pycharm)和初步理解
2020/10/23 Python
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
读书之星事迹材料
2014/05/12 职场文书
环境保护标语
2014/06/20 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
士兵突击观后感
2015/06/16 职场文书
投诉书格式范本
2015/07/02 职场文书
办公室规章制度范本
2015/08/04 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
MySQL详细讲解变量variables的用法
2022/06/21 MySQL