Webpack4 学习笔记七 跨域服务代理
- webpack 小插件使用
- webpack 监听文件变化配置
- webpack 处理跨域问题
Webpack 小插件使用
- clean-webpack-plugin: 用于在生成之前删除生成文件夹的Webpack插件
- copy-webpack-plugin: 将单个文件或整个目录复制到生成目录
- webpack.BannerPlugin内置插件: 给输出的文件头部插入注释信息
安装:
npm i clean-webpack-plugin copy-webpack-plugin --save-dev
webpack配置:
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry: './src/index.js',
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin('./dist'), // 也就是 output.path对应的目录, 相对路径
new CopyWebpackPlugin([
{
from: './doc', // 从哪个文件夹copy内容
to: './' // copy到哪里, 默认为输出目录
}
]),
new webpack.BannerPlugin('⌚author: qiqingfu'), // 会将这段内容插入到打包后的js文件最前面
]
}
webpack 监听文件变化配置
webpack 可以监听文件变化, 当它们重新修改后会重新编译。
启用 watch
模式, 它是一个 boolean类型的值, 默认为 false。当设置为 true, webpack将监听任何已解析文件的更改。
也可以使用 watchOptions
来配置watch模式的选项。
module.exports = {
// watch: true, 开启监听文件变化
watchOptions: {
aggregateTimeout: 1000, // 节流, 你这个文件修改后的一秒后,再进行构建
poll: 1000, // 每秒检查一次变动
ignored: /node_modules/ // 排除node_modules,监听大量文件系统会占用更多的CPU和内容消耗
}
}
webpack 处理跨域问题
所谓同源是指,域名,协议,端口相同。任何一者不同都会产生跨域。
假如:
前端服务为 http: //localhost:8080
后端的连调服务器为: http://192.163.21.1:8082
前端请求后端提供的接口, 由于域名
和端口
不同。所产生跨域的现象。
除了别的解决跨域的方式以外, 在webpack中也可以解决跨域的问题。
webpack.proxy 启用代理服务器。
webpack 中的钩子函数中自己mock数据
在服务端启用 webpack
webpack.proxy 启用代理服务器
后端服务: http://localhost:3000
const express = require('express')
const app = express()
app.get('/qy/user', (req, res) => {
console.log(req.url)
res.json({
name: 'qiqingfu',
age: 21,
job: 'web',
city: 'QingDao'
})
})
app.listen(3000,'localhost', () => {
console.warn('port open success: 3000')
})
前端请求:
xhr.open('GET', '/api/qy/user', true)
xhr.onload = function () {
console.log(xhr.response)
}
xhr.send()
webpack配置proxy代理
devServer: {
contentBase: './dist',
progress: true,
compress: true,
port: 8080,
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {"^/api": ""} // 将/api重写为""空字符串
}
}
}
凡是接口以 /api
开头的请求,都将其代理到后端的服务器上。http://localhost:3000
。
pathRewrite: {"^/api": ""}, 再将 /api
重写掉。什么意思呢? 因为后端的接口为 /qy/user
,我们用 /api开头只是为了统一管理, 如果不把/api重写掉,那发给后端的请求是 /api/qy/user
,和后端的接口不匹配。会出问题的。
通过 webpack.devServer 的钩子函数, mock数据
webpack配置
before: 提供在服务器内部所有其他中间件之前执行自定义中间件的能力
devServer: {
contentBase: './dist',
progress: true,
compress: true,
port: 8080,
before: app => {
app.get('/api/qy/user', (req, res) => {
res.json({name: 'mock'})
})
}
}
在服务端启用 webpack
需要weebpack插件: webpack-dev-middleware
server端配置:
const express = require('express')
const app = express()
const middle = require('webpack-dev-middleware')
const webpack = require('webpack')
const config = require('./webpack.config')
const comiler = webpack(config)
app.use(middle(comiler))
app.get('/qy/user', (req, res) => {
res.json({
name: 'qiqingfu',
age: 21,
job: 'web',
city: 'QingDao'
})
})
app.listen(3000,'localhost', () => {
console.warn('port open success: 3000')
})
然后启动服务的时候会后续启动 webpack, 直接访问 http://localhost:3000
, 可直接访问到数据
笔记地址
Webpack4 学习笔记七 跨域服务代理的更多相关文章
- 跨域学习笔记2--WebApi 跨域问题解决方案:CORS
自己并不懂,在此先记录下来,留待以后学习... 正文 前言:上篇总结了下WebApi的接口测试工具的使用,这篇接着来看看WebAPI的另一个常见问题:跨域问题.本篇主要从实例的角度分享下CORS解决跨 ...
- HTML5学习笔记:跨域
在跨域安全性方面,有多个地方会有限制,主要是XMLHttpRequest对象的跨域限制和iFrame的跨域限制,下面我们分别来看一下. Ajax跨域(CORS) CORS是一个W3C标准,全称是&qu ...
- vue.js学习之 跨域请求代理与axios传参
vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...
- go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer)
目录 go微服务框架kratos学习笔记七(kratos warden 负载均衡 balancer) demo demo server demo client 池 dao service p2c ro ...
- vue-cli 3.0之跨域请求代理配置及axios路径配置
vue-cli 3.0之跨域请求代理配置及axios路径配置 问题:在前后端分离的跨域请求中,报跨域问题 配置: vue.config.js: module.exports = { runtimeCo ...
- Java IO学习笔记七:多路复用从单线程到多线程
作者:Grey 原文地址:Java IO学习笔记七:多路复用从单线程到多线程 在前面提到的多路复用的服务端代码中, 我们在处理读数据的同时,也处理了写事件: public void readHandl ...
- (转)Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- 基于 HTTP 请求拦截,快速解决跨域和代理 Mock
近几年,随着 Web 开发逐渐成熟,前后端分离的架构设计越来越被众多开发者认可,使得前端和后端可以专注各自的职能,降低沟通成本,提高开发效率. 在前后端分离的开发模式下,前端和后端工程师得以并行工作. ...
随机推荐
- Hashtable元素的删除
2中方法 Remove(); Clear(); static void Main(string[] args) { Hashtable ht = new Hashtable(); ht.Add(1,& ...
- Junit入门教程
做开发的时候,完成一个接口.方法.函数或者功能等,需要测试,是否有bug,有逻辑错误.这里有两种方案测试 1. 在main中写测试方法 2. 使用开源框架,这里使用的junit main写测试方法优点 ...
- [PAMI 2018] Differential Geometry in Edge Detection: accurate estimation of position, orientation and curvature
铛铛铛,我的第一篇文章终于上线了,过程曲折,太不容易了--欢迎访问--- https://ieeexplore.ieee.org/document/8382271/ 后面有需要的话可以更新一下介绍,毕 ...
- 打杂程序员之ftp换成外网ip咋就登陆不上?
主动模式ftp N连接到ftp的21端口.然后客户端开端口监听,并通过N+1端口发送命令给FTP服务器.服务器反过来连接用户本地端口. 被动模式解决从服务器到客户端数据端口的入口反向连接被防火墙过滤掉 ...
- SharePoint 2013 - User Custom Action
1. User Custom Action包含Ribbon和ECB,以及Site Action菜单等,参考此处: 2. 系统默认ECB的Class为: ms-core-menu-box --> ...
- SQL Server数据类型一览表
数据类型 类型 描 述 bit 整型 bit 数据类型是整型,其值只能是0.1或空值.这种数据类型用于存储只有两种可能值的数据,如Yes 或No.True 或Fa lse .O ...
- 操作Active Directory C#
.Net平台操作活动目录Active Directory,使用System.DirectoryServices.ActiveDirectory,主要是User OU 和Group的操作. 代码运行了一 ...
- JSP禁用缓存的方式 response.setHeader( "Pragma", "no-cache" ); setDateHeader("Expires", 0);
JSP禁用缓存的方式 使用服务器端控制AJAX页面缓存: response.setHeader( "Pragma", "no-cache" ...
- 【转载】#457 Converting Between enums and their Underlying Type
When you declare an enum, by default each enumerated value is represented internally with an int. (S ...
- LeetCodeOJ刷题之12【Integer to Roman】
Integer to Roman Given an integer, convert it to a roman numeral. Input is guaranteed to be within t ...