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 相关文章推荐
JavaScript 学习技巧
Feb 17 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
Dec 07 Javascript
浅析Vue 生命周期
Jun 21 Javascript
VUE渲染后端返回含有script标签的html字符串示例
Oct 28 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
May 18 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 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自动反斜杠的函数代码
2010/01/05 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
javascript动态加载三
2012/08/22 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
2016/03/28 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
详解Django框架中的视图级缓存
2015/07/23 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
python+django+sql学生信息管理后台开发
2018/01/11 Python
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
大学四年职业生涯规划书范文
2014/01/02 职场文书
公务员政审单位鉴定材料
2014/05/16 职场文书
2015年医务人员医德医风自我评价
2015/03/03 职场文书
端午节寄语2015
2015/03/23 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书