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 数组实现一个类似ruby的迭代器
Oct 27 Javascript
解析Jquery的LigerUI如何实现文件上传
Jul 09 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
react中useState使用:如何实现在当前表格直接更改数据
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
一次编写,随处运行
2006/10/09 PHP
提升PHP执行速度全攻略(上)
2006/10/09 PHP
php把session写入数据库示例
2014/02/26 PHP
php中ftp_chdir与ftp_cdup函数用法
2014/11/18 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JS实现超精简响应鼠标显示二级菜单代码
2015/09/12 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
2017/03/07 Javascript
JS实现上传图片实时预览功能
2017/05/22 Javascript
webpack4 optimization使用总结
2019/11/10 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
python多进程实现进程间通信实例
2017/11/24 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
Python接口测试get请求过程详解
2020/02/28 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
文明学生事迹材料
2014/01/29 职场文书
大学生全国两会报告感想
2014/03/17 职场文书
环境保护标语
2014/06/20 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
六年级作文之关于梦
2019/10/22 职场文书