脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → Angular4 反向代理Details

Angular4 反向代理Details实践

 更新时间：2018年05月30日 10:20:01   作者：navk  
本篇文章主要介绍了Angular4 反向代理Details实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了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**

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 如何编写一个完整的Angular4 FormText 组件

    如何编写一个完整的Angular4 FormText 组件

    本篇文章主要介绍了如何编写一个完整的Angular4 FormText 组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Angular中使用Api 代理的实现

    Angular中使用Api 代理的实现

    我们对接的过程中总是遇到跨域的问题，本文使用 angualr 来讲解代理api对接的话题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • AngularJS 教程及实例代码

    AngularJS 教程及实例代码

    AngularJS 通过新的属性和表达式扩展了 HTML。AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。本文给大家介绍angularjs 的相关知识，感兴趣的朋友一起看看吧
    2017-10-10
  • MODULE_INITIALIZER初始化Angular 懒加载模块高级技巧

    MODULE_INITIALIZER初始化Angular 懒加载模块高级技巧

    这篇文章主要为大家介绍了MODULE_INITIALIZER初始化Angular懒加载模块高级技巧示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • AngularJS中run方法的巧妙运用

    AngularJS中run方法的巧妙运用

    前端技术的发展是如此之快，各种优秀技术、优秀框架的出现简直让人目不暇接，紧跟时代潮流，学习掌握新知识自然是不敢怠慢。下面这篇文章主要给大家介绍了AngularJS中run方法的巧妙运用,需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-01-01
  • Angularjs的键盘事件的绑定

    Angularjs的键盘事件的绑定

    这篇文章主要介绍了Angularjs的键盘事件的绑定的相关资料,这里提供了两种方法，1.ng内置指令，2.自定义指令，并进行比较，需要的朋友可以参考下
    2017-07-07
  • 详解Angular5 路由传参的3种方法

    详解Angular5 路由传参的3种方法

    这篇文章主要介绍了详解Angular5 路由传参的3种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Angularjs使用过滤器完成排序功能

    Angularjs使用过滤器完成排序功能

    这篇文章主要为大家详细介绍了Angularjs使用过滤器完成排序功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-09-09
  • AngularJS与BootStrap模仿百度分页的示例代码

    AngularJS与BootStrap模仿百度分页的示例代码

    分页在很多时候都能用到，这篇文章主要介绍了AngularJS与BootStrap模仿百度分页的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Angular中sweetalert弹框的基本使用教程

    Angular中sweetalert弹框的基本使用教程

    这篇文章主要给大家介绍了关于Angular中sweetalert弹框的基本使用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07

最新评论