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

 更新时间:2018年04月18日 09:39:13   作者:沐雨橙风丶   我要评论
后端只负责接口,前端负责数据展示、逻辑处理。那么如何跨域?这篇文章主要介绍了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 () {
    },
    success: function (data) {
    },
    error: function (error) {
    }
  });

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

  • 微信小程序如何修改radio和checkbox的默认样式和图标

    微信小程序如何修改radio和checkbox的默认样式和图标

    这篇文章主要介绍了微信小程序修改radio和checkbox的默认样式和图标,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • javascript下操作css的float属性的特殊写法

    javascript下操作css的float属性的特殊写法

    javascript下操作css的float属性的特殊写法...
    2007-08-08
  • 详解react-native-fs插件的使用以及遇到的坑

    详解react-native-fs插件的使用以及遇到的坑

    本篇文章主要介绍了react-native-fs插件的使用以及遇到的坑,详细的介绍了react-native-fs安装使用,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • JS正则获取HTML元素的方法

    JS正则获取HTML元素的方法

    这篇文章主要介绍了JS正则获取HTML元素的方法,结合实例形式分析了JS针对页面HTML元素正则操作相关技巧与注意事项,需要的朋友可以参考下
    2017-03-03
  • js实现二级菜单渐隐显示

    js实现二级菜单渐隐显示

    这篇文章主要介绍了js制作导航菜单实现二级菜单渐隐显示,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • Position属性之relative用法

    Position属性之relative用法

    Relative是position的一个属性,是相对定位,通过本篇文章给大家介绍Position属性之relative用法,对position属性relative相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • 一段利用WSH修改和查看IP配置的代码

    一段利用WSH修改和查看IP配置的代码

    建议增加查询条件,更准确地修改指定网卡。 本人是铁通的线路,这样看比较不错的wsh功能呢,喜欢vbs的朋友,可以用vbs实现,功能更强
    2008-05-05
  • javascript改变position值实现菜单滚动至顶部后固定

    javascript改变position值实现菜单滚动至顶部后固定

    现在很多网站都有这样的一个效果,当页面滚动到一定高度时,菜单栏会固定在页面顶部;该效果在 ie6 下不支持,因为ie6不支持 position:fixed,效果很不错,感兴趣的朋友可以了解下啊
    2013-01-01
  • JS实现全屏的四种写法

    JS实现全屏的四种写法

    这篇文章主要为大家详细介绍了JS或jquery实现全屏的四种写法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • webpack手动配置React开发环境的步骤

    webpack手动配置React开发环境的步骤

    本篇文章主要介绍了webpack手动配置React开发环境的步骤,webpack手动配置一个独立的React开发环境, 开发环境完成后, 支持自动构建, 自动刷新, sass语法 等功能...感兴趣的小伙伴们可以参考一下
    2018-07-07

最新评论