webpack-dev-server proxy代理
一个最简单的代理例子:index.html中有如下代码
fetch('/api/pub/article/list?pageSize=2').then((data)=>{
return data.json()
}).then((json)=>{
console.log(json)
})
里面访问的是相对地址,但我本地并没有服务器有提供这些api。把以上的路径补全为云服务器上的绝对路径,但是又报CORS错误。
解决办法是配置一个代理。这里通过webpack-dev-server实现,简单的配置文件如下:
module.exports = {
entry: {
bundle:'./main.js',
},
output: {
filename: '[name].js'
},
devServer: {
port: 8889,
host: '127.0.0.1',
proxy: {
'/api/*': {
target: 'http://123.207.95.11:9001'
}
}
}
};
接着运行(以当前目录作为静态文件的根目录):
webpack-dev-server --content-base ./
访问 http://127.0.0.1:8889/index.html ,以上代码可以正常执行了。
对于以上的配置和运行指令,做了如下事情:
- 监听 127.0.0.1:8889,以当前目录(content-base参数指令的目录)作为静态文件的根目录
- 访问index.html,里面发出的请求是相对地址,也就是访问了这个地址 127.0.0.1:8889/pub/.....
- 因为webpack-dev-server读取以上的配置文件,这个请求匹配了 /api/* ,就把这个请求转发到了对应的target处,也就是http://123.207.95.11:9001这个地址下了。也就是请求 浏览器 -> webpack-dev-server -> 127.207.95.11 。
- 最后把响应数据传递到浏览器。 也就是 127.207.95.11 -> webpack-dev-server -> 浏览器
webpack-dev-server proxy代理的更多相关文章
- 配置Webpack Dev Server 实战操作方法步骤
本文摘要:配置 Webpack Dev Server 可以解决本地开发前端应用时,手动执行 webpack 命令或 yarn build 命令,再去浏览器中访问 dist/index.html 的麻烦 ...
- 笔记:配置 webpack dev server
笔记:配置 webpack dev server 安装 webpack-dev-server 组件 配置 webpack.config.js 配置 增加 html-webpack-plugin 组件 ...
- [Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone
Testing your sites on mobile devices is a critical part of the development process. Webpack dev serv ...
- [webpack]深入理解proxy代理
1.一个基本的代理 module.exports = { //... devServer: { proxy: { '/api': 'http://localhost:3000' } } }; /api ...
- webpack dev server 和 sublime text 配合时需要注意的地方
参考:https://webpack.js.org/guides/development/ Adjusting Your Text Editor Some text editors have a &q ...
- webpack dev server 配置 启动项目报错Error: listen EADDRINUSE
Error: listen EADDRINUSE 0.0.0.0:5601 它的意思是,端口5601被其他进程占用. 切换端口即可解决问题
- webpack 4 & dev server
webpack 4 & dev server proxy https://webpack.js.org/configuration/dev-server/#devserverproxy htt ...
- 解决新版本webpack vue-cli生成文件没有dev.server.js问题
新版本webpack生成的dev.server.js 在webpack.dev.conf.js中 webpack.dev.conf.js const axios = require('axios') ...
- vue-cli脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
- vue -- 脚手架之webpack.dev.conf.js
webpack.dev.conf.js 开发环境模式配置文件: 'use strict'//js按照严格模式执行 const utils = require('./utils')//导入utils. ...
随机推荐
- 买票案例 1.synchronize关键字 2.lock锁
- sql索引的作用
转https://www.cnblogs.com/hyd1213126/p/5828937.html (一)深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录.微软的SQL SERVER提 ...
- ubuntu dpkg命令总结
dpkg是Debian系统的后台包管理器,类似RPM.也是Debian包管理系统的中流砥柱,负责安全卸载软件包,配置,以及维护已安装的软件包.由于ubuntu和Debian乃一脉相承,所以很多命令是不 ...
- springMVC-接收数据-参数绑定
接收数据-参数绑定 #Method Arguments概观 Same in Spring WebFlux The table below shows supported controller meth ...
- Mvc 多级控制器 路由重写 及 多级Views目录 的寻找视图的规则
1.那么我们再来看我们需要的访问方式,如下图 如果我们要访问Admin下的TestController里面的Index页面,那么我们输入Test/Index,这个肯定不行的.因为TestControl ...
- C# 枚举类型的描述信息获取
新建一个控制台方法,写好自己的枚举类型: 如图: 在里面添加获取描述的方法: 具体源码: 链接:http://pan.baidu.com/s/1nv4rGkp 密码:byz8
- 在Window上用cmd创建.htaccess文件
Windows 图形下不能直接建立空名字的文件,所以没法直接创建.htaccess文件,不过可以通过命令行创建: cd /path/to/your/dir/ type nul>.htaccess ...
- Windwos下安装和使用MongoDB
1)下载安装包下载路径:https://www.mongodb.com/download-center#community包名称:mongodb-win32-x86_64-3.4.10-signed. ...
- POJ 1947 Rebuilding Roads (树形DP)
题意:给一棵树,在树中删除一些边,使得有一个连通块刚好为p个节点,问最少需要删除多少条边? 思路: 因为任一条边都可能需要被删除,独立出来的具有p个节点的连通块可能在任意一处地方.先从根开始DFS,然 ...
- More helpful Cocos2d and Gaming macros
More helpful Cocos2d and Gaming macros Here are w few macros that i wrote to make the code more read ...