详解webpack-dev-server 设置反向代理解决跨域问题
时间:2019-04-14
本文章向大家介绍详解webpack-dev-server 设置反向代理解决跨域问题,主要包括详解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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 3039: 玉蟾宫
- 大公司都有哪些开源项目之腾讯
- Vue拖拽组件开发实例
- 一小时培训之神经网络入门
- 【LeetCode 290】 关关的刷题日记28 Word Pattern
- Redis知识点速查
- 上传伪技术~很多人都以为判断了后缀,判断了ContentType,判断了头文件就真的安全了。是吗?
- SpringBoot的微信点餐系统后台开发要点
- 【LeetCode 463】 关关的刷题日记29 Island Perimeter
- 搭建移动端的跨平台开发环境
- 30分钟全面解析-SQL事务+隔离级别+阻塞+死锁
- 【最新TensorFlow1.4.0教程03】利用Eager Execution构建和训练卷积神经网络(CNN)
- 360护心镜脚本分析及N种绕过方式
- 清北集训Day6T1(生成函数)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- webRTC: 基于coturn项目的stun/turn服务器搭建
- 百度地图电子围栏功能
- opencv使用中出现的问题
- 人生苦短,我用k8s--------------Pod资源控制进阶管理
- 人生苦短,我用k8s--------------kuberctl命令合集
- Android使用Intent实现页面跳转
- Android实现单页显示3个Item的ViewPager炫酷切换效果
- Android用文件存储数据的方法
- Android编程监听APK安装与删除等过程的方法
- 人生苦短,我用k8s--------------详解yaml文件
- 排障集锦:九九八十一难之第二十难!-----使用jenkins镜像出现的问题Can not write to /var/jenkins_home/copy_reference_file.log.
- 人生苦短,我用k8s--------------secret和configmap的配置管理
- Go Colly抓取豆瓣电影Top250
- knative client 使用knative client 使用
- Java_web 学习1 Maven安装和使用2 mybatis的配置文件的详解mybatis缓冲mybatis注解延迟加载${} 与 #{} 区别【笔试题】