Angular4 反向代理Details实践


Posted in Javascript onMay 30, 2018

本文介绍了Angular4 反向代理Details实践,分享给大家,具体如下:

1. 设置proxy.config.json文件

{
 "/api": {  //这里是前台调用后端接口时做的代理标识
  "target": "localhost:3100",
  "logLevel": "debug",
  "secure": false,
  "changeOrigin": true,
  "pathRewrite": {
   "^/api": ""
  }
 }
}

注意:pathRewrite 部分的配置,"pathRewrite": {"^/api": ""} 如果没有这部分的配置,那在发送请求的时候,实际请求的地址将会是http://localhost:3100/api/actionapi/。相较于真实url,会多出/api这一部分。

2. 设置service的url

//这里的api表示代理标识
//实际的访问url应该是:http://localhost:3100/actionapi/
const wcfPath = '/api/actionapi/';

3. 设置package.json文件

"scripts": {
  "ng": "ng",
  "build": "ng build --prod --aot --build-optimizer",
  "start:dev": "ng serve --proxy-config proxy.conf.json --open",
  "start:aot": "ng serve --prod --aot --proxy-config proxy.conf.json --open",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
 }

再重新npm run start:dev启动一下项目,应该就能启用angular反向代理了。

**顺便再补充一下webpack和angular的proxy地址:
https://webpack.js.org/configuration/dev-server/#devserver-proxy
https://github.com/angular/angular-cli/wiki/stories-proxy**

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js 中debug方式
Feb 07 Javascript
js调用activeX获取u盘序列号的代码
Nov 21 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
Vue常用指令详解分析
Aug 19 Javascript
其实你可以少写点if else与switch(推荐)
Jan 10 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
js cavans实现静态滚动弹幕
May 21 Javascript
pnpm对npm及yarn降维打击详解
Aug 05 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 #Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 #Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 #Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 #Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 #Javascript
vue通过点击事件读取音频文件的方法
May 30 #Javascript
vue 表单输入格式化中文输入法异常问题
May 30 #Javascript
You might like
PHP中对数据库操作的封装
2006/10/09 PHP
php和js交互一例-PHP教程,PHP应用
2007/01/03 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
JS获取几种URL地址的方法小结
2014/02/26 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
在Python的Django框架中simple-todo工具的简单使用
2015/05/30 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python编码类型转换方法详解
2016/07/01 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python中偏函数用法示例
2018/06/07 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
大学军训感言400字
2014/03/11 职场文书
食品安全工作实施方案
2014/03/26 职场文书
实名检举信范文
2015/03/02 职场文书
房产证明范本
2015/06/19 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
详解如何用Python实现感知器算法
2021/06/18 Python
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS