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": ""} 如果沒有這部分的配置，那在發(fā)送請求的時候，實際請求的地址將會是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**
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
本文主要介紹AngularJS 迭代器過濾,這里提供了詳細的知識資料，并附示例代碼，有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了基于angular實現模擬微信小程序swiper組件 ,需要的朋友可以參考下2017-06-06
本文主要介紹AngularJS API（接口）,這里對AngularJS API的知識做了詳細講解,并附簡單代碼實例,有需要的小伙伴可以參考下2016-07-07
深入淺析angular和vue還有jquery的區(qū)別
vue是一個漸進式的框架, 是一個輕量級的框架而angular是一個mvc框架, 各有千秋，下面小編通過本文給大家介紹angular和vue還有jquery的區(qū)別，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了AngularJS實現自定義指令與控制器數據交互的方法,結合具體實例形式分析了AngularJS自定義指令的實現以及與控制器數據交互的操作技巧,需要的朋友可以參考下2017-06-06
本文主要介紹了Angular2組件的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
AngularJS 在同一個界面啟動多個ng-app應用模塊詳解
這篇文章主要介紹了AngularJS 在同一個界面啟動多個ng-app應用模塊詳解的相關資料,需要的朋友可以參考下2016-12-12
這篇文章主要給大家介紹了關于Angular.js指令學習中一些重要屬性的用法教程，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
AngularJS實現與Java Web服務器交互操作示例【附demo源碼下載】
這篇文章主要介紹了AngularJS實現與Java Web服務器交互操作的方法,結合實例形式較為詳細的分析了AngularJS前臺ajax提交與javascript后臺處理的完整流程與實現技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-11-11
解決angularjs中同步執(zhí)行http請求的方法
今天小編就為大家分享一篇解決angularjs中同步執(zhí)行http請求的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08