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 相关文章推荐
DOM下的节点属性和操作小结
May 14 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
React Native时间转换格式工具类分享
Oct 24 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
webpack+express实现文件精确缓存的示例代码
Jun 11 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
js读取注册表的键值示例
2013/09/25 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
2017/08/26 jQuery
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
Python计算已经过去多少个周末的方法
2015/07/25 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python Pillow图像处理方法汇总
2019/10/16 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
2016/12/09 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
副厂长岗位职责
2014/02/02 职场文书
运动会班级口号
2014/06/09 职场文书
英文感谢信格式
2015/01/21 职场文书
2015年司法所工作总结
2015/04/27 职场文书
爱心捐书倡议书
2015/04/27 职场文书
团结友爱主题班会
2015/08/13 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
一文搞懂MySQL索引页结构
2022/02/28 MySQL
MySQL 数据库范式化设计理论
2022/04/22 MySQL