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框架
Aug 13 Javascript
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
JS实现CheckBox复选框全选全不选功能
May 06 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
详解uniapp的全局变量实现方式
Jan 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
PHP文本数据库的搜索方法
2006/10/09 PHP
在IIS上安装PHP4.0正式版
2006/10/09 PHP
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
PHP实现多条件查询实例代码
2010/07/17 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
JavaScript无操作后屏保功能的实现方法
2017/07/04 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
一个超级简单的python web程序
2014/09/11 Python
python中使用序列的方法
2015/08/03 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
Python之循环结构
2019/01/15 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
pandas DataFrame运算的实现
2020/06/14 Python
python 使用递归的方式实现语义图片分割功能
2020/07/16 Python
转让协议书范本
2014/09/13 职场文书
律师授权委托书范本
2014/10/07 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python