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. ...
随机推荐
- JavaScript 中的面向对象编程
使用JSON 来定义一个对象: <script type="text/javascript">var xiaoming = { name : 'xiaoming', a ...
- PAT甲级——1131 Subway Map (30 分)
可以转到我的CSDN查看同样的文章https://blog.csdn.net/weixin_44385565/article/details/89003683 1131 Subway Map (30 ...
- linux安装odbc for mysql
1 安装驱动包 yum install unixODBC-devel -y yum install -y mysql-connector-odbc 2 配置数据源 [root@omserver-11 ...
- BZOJ1218(线段树+扫描线)
1.扫描线扫描x轴,线段树维护y轴. 2.坐标+1,线段树是从1开始维护.然后让边长--,这样就能包含边上的点了. 3.为了保证点在正方形内:在x轴上利用差分的思想,在x出Add(val),在x+r( ...
- ZOJ3329(数学推导+期望递推)
要点: 1.期望的套路,要求n以上的期望,则设dp[i]为i分距离终点的期望步数,则终点dp值为0,答案是dp[0]. 2.此题主要在于数学推导,一方面是要写出dp[i] = 什么,虽然一大串但是思维 ...
- 利用HttpClient4访问网页
一.HttpClient介绍 虽然在 JDK 的 java.net 包中已经提供了访问 HTTP 协议的基本功能,但是它没有提供足够的灵活性和其他应用程序需要的功能.HttpClient 是 Apac ...
- 通过configmap更新k8s里的mysql配置文件
背景: 环境注意:在用rancher搭建的k8s里,mysql是起了一个pod,镜像是网上的mysql:5.7 开发人员提出了一个报错“查询时的ONLY_FULL_GROUP_BY错误”,让我改sql ...
- Mysql 事务隔离级别(图文详解)
本文由 SnailClimb 和 BugSpeak 共同完成. 事务隔离级别(图文详解) 什么是事务? 事物的特性(ACID) 并发事务带来的问题 事务隔离级别 实际情况演示 脏读(读未提交) 避免脏 ...
- QlikView入门
1.windows x64下载地址: http://d1cf4w4kkla6tb.cloudfront.net/qlikview/11.20/11718/_MSI/QlikViewDesktop_x6 ...
- Enum 枚举类
目录 Enum 枚举类 基础 定义与用途 基本方法 示例 进阶 实现原理 枚举与Class对象 自定义枚举类和构造方法及toString() Enum中使用抽象方法来实现枚举实例的多态性 Enum与接 ...