文档章节

webpack http-proxy配置

黑魔法
 黑魔法
发布于 2017/08/01 15:42
字数 500
阅读 68
收藏 0

配置http-proxy

在webpack的配置文件(webpack.config.js)中进行配置

module.exports = {
 ...此处省略一万字

 // webpack-dev-server的配置
 devServer: {
 historyApiFallback: true,
 hot: true,
 inline: true,
 progress: true,
 port: 3000,
 host: '10.0.0.9',
 proxy: {
 '/test/*': {
 target: 'http://localhost',
 changeOrigin: true,
 secure: false
 }
 }
 },

 ...此处省略一万字
};

上述配置中,关于http-proxy的只是 proxy: {...} 中的值

调用接口

为了方便起见,下面使用jquery封装好的ajax函数进行示范

$.ajax({
 // url: 'http://10.0.0.9:3000/test/testFetch/Login.php', // 这样不行
 url: '/test/testFetch/Login.php', // 这样行
 type: 'post',
 data: {
 app_id: '13751313169',
 password: '123456',
 user_name: 'Nicholas'
 },
 success: function(data) {
 console.log(data);
 }
});



作者:NicholasNC
链接:http://www.jianshu.com/p/3bdff821f859
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

proxy中的部分参数说明

'/test/*' 以及 target: 'http://localhost'

  • 从名字就能看出,这个实际上是将匹配 '/test/*' 这种格式的API的域名重定向为 'http://localhost'
  • 结合上面的 “调用接口” 可以看出, url: '/test/testFetch/Login.php' 这句,实际上会自动补充前缀,也就是说,url: '/test/testFetch/Login.php' 等价于 url: 'http://10.0.0.9:3000/test/testFetch/Login.php'
    • 但是,我们使用了http-proxy进行重定向,这样的话,url: '/test/testFetch/Login.php' 等价于 url: 'http://localhost/test/testFetch/Login.php'

changeOrigin

  • true/false, Default: false - changes the origin of the host header to the target URL
  • 本地会虚拟一个服务端接收你的请求并代你发送该请求——这个是别人的说法
  • 我试了一下,就算这个参数设置成 false 也有部分情况是可以的,具体原因不详,所以还是将其设置成 true

secure

  • true/false, if you want to verify the SSL Certs

pathRewrite

  • 例子: pathRewrite: {'^/api': ''}
  • Object-keys will be used as RegExp to match paths
  • 我猜,这里是将 '^/api' 使用 '' 代替(只是我猜,没是成功,估计是我的正则表达式写得不行)

附上使用Fetc



作者:NicholasNC
链接:http://www.jianshu.com/p/3bdff821f859
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

本文转载自:http://www.jianshu.com/p/3bdff821f859

黑魔法
粉丝 14
博文 178
码字总数 44775
作品 0
武汉
前端工程师
私信 提问
webpack4.0 CheatSheet

还在为webpack的配置而烦恼吗?这里有一份webpack从简易到高级版本的配置。还附赠配置地址,你想要吗?不,你不想。老老实实自己配置去吧。 压箱底的笔记而已,大家看看乐乐就好了,这是笔者...

cherryvenus
03/21
0
0
为REST API创建模拟API - mocker-api

mocker-api 为 REST API 创建模拟 API。 当您尝试在没有实际 REST API 服务器的情况下测试应用程序时,它会很有用。 特征: :fire:内置支持热Mocker文件替换。 :rocket:通过JSON快速轻松地配...

匿名
04/30
0
0
webpack-dev-server 核心概念

webpack-dev-server 核心概念 Webpack 的 ContentBase vs publicPath vs output.path webpack-dev-server 会使用当前的路径作为请求的资源路径(所谓 当前的路径 就是运行 webpack-dev-serv...

粒子数反转
2018/11/22
0
0
谁说前端需要懂 Nginx 了?

--读《谁说前端不需要懂-Nginx反向代理与负载均衡》有感 读了上文发现内容虽然还是挺好的,但看完,为啥要懂nginx呀,负载均衡和前端哪里有什么半毛钱关系了,没说清楚呀。 当然这个面向前端...

vellengs
2018/06/22
0
0
用VueJS+webpack+semantic-UI+Laravel开发单页应用

实验性项目 https://github.com/zgldh/vuejs-laravel 结合当前最酷的几样玩意儿,制作单页面Web APP。 vuejs-laravel VueJS + webpack + semantic-UI + Laravel 前后分离的快速开发框架。 自...

zgldh
2016/04/14
2.8K
3

没有更多内容

加载失败,请刷新页面

加载更多

任务调度-单体应用定时任务解决方案

1. 应用场景: 单体应用(并发少、就公司内部使用)、业务比较简单、单一、稳定,传统行业首选,项目初期。 2. 主要方式: Spring XML配置方式,timer。 <bean id="cycleBonusTimer" class="...

秋日芒草
20分钟前
3
0
EditText中singleLine过期替代方法

android:lines="1" android:inputType="text"

球球
34分钟前
1
0
删除 Tomcat-webapps 目录自带项目

本文将 %CATALINA_HOME% 目录称为“tomcat”目录。 1.webapps目录中的项目 在 Tomcat 8.0 的 tomcat/webapps 目录中,含有 5 个 Tomcat 自带的 Web 项目,如下所示: docs 有关于 Tomcat 的介...

Airship
38分钟前
3
0
好文:华杉:我等用功,不求日增,但求日减。减一分人欲,则增一分天理,这是何等简易!何等洒脱!

#写在前面1.怎么理解“减一分人欲,则增一分天理,这是何等简易!”?1)华杉提倡 “一劳永逸” 排除浪费,少干活,多赚钱,一战而定,降低作业成本。2)华杉提倡学海无涯,回头是岸...

阿锋zxf
48分钟前
3
0
vue 的bus总线

bus声明 global.bus = new Vue() 事件发送 controlTabbar () {global.bus.$emit('pickUp', 'ddd')}, 事件接收 global.bus.$on('pickUp', (res) => {this.isFocus = true})......

Js_Mei
53分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部