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 相关文章推荐
jQuery 自定义函数写法分享
Mar 30 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 Javascript
React实现评论的添加和删除
Oct 20 Javascript
JS前端使用canvas实现扩展物体类和事件派发
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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP类型约束用法示例
2016/09/28 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
详解Vue源码中一些util函数
2019/04/24 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
python分割和拼接字符串
2013/11/01 Python
简单解析Django框架中的表单验证
2015/07/17 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
商务英语专业自荐信
2013/10/14 职场文书
财务方面个人工作的自我评价
2013/12/28 职场文书
领导证婚人证婚词
2014/01/13 职场文书
小学作文评语大全
2014/04/21 职场文书
力学专业求职信
2014/07/23 职场文书
作风年建设汇报材料
2014/08/14 职场文书
小学假期安全广播稿
2014/09/28 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android