详解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

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

相关文章

  • JavaScript实现时间表动态效果

    JavaScript实现时间表动态效果

    这篇文章主要为大家详细介绍了JavaScript实现时间表动态效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Javascript中内建函数reduce的应用详解

    Javascript中内建函数reduce的应用详解

    内建函数其实就是内置函数,reduce函数是ECMAScript5规范中出现的数组方法。在平时的工作中,相信大家使用的场景并不多,这篇文章给大家详细介绍了函数reduce的应用以及多重叠加,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-10-10
  • 通过修改360抢票的刷新频率和突破8车次限制实现方法

    通过修改360抢票的刷新频率和突破8车次限制实现方法

    这篇文章主要介绍了通过修改360抢票的刷新频率和突破8车次限制实现方法的相关资料,现在刷票工具很多,这里就举一例修改,增加抢票频率及突破8车次限制,需要的朋友可以参考下
    2017-01-01
  • JavaScript类型系统之基本数据类型与包装类型

    JavaScript类型系统之基本数据类型与包装类型

    javascript的数据类型可以分为两种:原始类型和引用类型,在此文给大家提到。本文主要给大家介绍javascript类型系统之基本数据类型与包装类型,涉及到js 基本类型 包装类相关知识,本文介绍的详细,具有参考借鉴价值,对本文感兴趣的朋友一起学习吧
    2016-01-01
  • 使用JS实现图片轮播的实例(前后首尾相接)

    使用JS实现图片轮播的实例(前后首尾相接)

    下面小编就为大家带来一篇使用JS实现图片轮播的实例(前后首尾相接)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript常见事件处理程序实例总结

    JavaScript常见事件处理程序实例总结

    这篇文章主要介绍了JavaScript常见事件处理程序,结合实例形式总结分析了javascript HTML事件、DOM事件、IE事件等相关处理程序与操作技巧,需要的朋友可以参考下
    2019-01-01
  • 浅谈typescript中keyof与typeof操作符用法

    浅谈typescript中keyof与typeof操作符用法

    本文主要介绍了typescript中keyof与typeof操作符用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • JavaScript实现多维数组的方法

    JavaScript实现多维数组的方法

    这篇文章主要介绍了JavaScript实现多维数组的方法,有需要的朋友可以参考一下
    2013-11-11
  • Java前后端分离之权限管理示例分析

    Java前后端分离之权限管理示例分析

    权限管理就是管理用户对于资源的操作。本 CRM 系统的权限(也称作资源)是基于角色操作权限来实现的,即RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联
    2022-08-08
  • 微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)

    微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)

    这篇文章主要介绍了微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析),需要的朋友可以参考下
    2020-04-04

最新评论