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 相关文章推荐
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
基于axios 的responseType类型的设置方法
Oct 29 Javascript
记录一次websocket封装的过程
Nov 23 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
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
HTML5附件拖拽上传drop & google.gears实现代码
2011/04/28 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:奇迹哥卡尔秀翻全场
2017/03/28 DOTA
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python实现TCP协议下的端口映射功能的脚本程序示例
2016/06/14 Python
python实现两个文件合并功能
2018/04/01 Python
Python基于百度云文字识别API
2018/12/13 Python
python3.4爬虫demo
2019/01/22 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
Python的垃圾回收机制详解
2019/08/28 Python
linux面试题参考答案(4)
2013/01/28 面试题
JPA的优势都有哪些
2013/07/04 面试题
雷人标语集锦
2014/06/19 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
2014和解协议书范文
2014/09/15 职场文书
小学四年级学生评语
2014/12/26 职场文书
千手观音观后感
2015/06/03 职场文书
《叶问2》观后感
2015/06/15 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python
Python中npy和mat文件的保存与读取
2022/04/24 Python
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs