Angular4 反向代理Details實踐
本文介紹了Angular4 反向代理Details實踐，分享給大家，具體如下：
1. 設(shè)置proxy.config.json文件
{
"/api": { //這里是前臺調(diào)用后端接口時做的代理標(biāo)識
"target": "localhost:3100",
"logLevel": "debug",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
注意：pathRewrite 部分的配置，"pathRewrite": {"^/api": ""} 如果沒有這部分的配置，那在發(fā)送請求的時候，實際請求的地址將會是http://localhost:3100/api/actionapi/。相較于真實url，會多出/api這一部分。
2. 設(shè)置service的url
//這里的api表示代理標(biāo)識 //實際的訪問url應(yīng)該是：http://localhost:3100/actionapi/ const wcfPath = '/api/actionapi/';
3. 設(shè)置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啟動一下項目，應(yīng)該就能啟用angular反向代理了。
**順便再補充一下webpack和angular的proxy地址：
https://webpack.js.org/configuration/dev-server/#devserver-proxy
https://github.com/angular/angular-cli/wiki/stories-proxy**
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹AngularJS 迭代器過濾,這里提供了詳細(xì)的知識資料，并附示例代碼，有需要的小伙伴可以參考下2016-08-08
基于angular實現(xiàn)模擬微信小程序swiper組件
這篇文章主要介紹了基于angular實現(xiàn)模擬微信小程序swiper組件 ,需要的朋友可以參考下2017-06-06
本文主要介紹AngularJS API（接口）,這里對AngularJS API的知識做了詳細(xì)講解,并附簡單代碼實例,有需要的小伙伴可以參考下2016-07-07
深入淺析angular和vue還有jquery的區(qū)別
vue是一個漸進式的框架, 是一個輕量級的框架而angular是一個mvc框架, 各有千秋，下面小編通過本文給大家介紹angular和vue還有jquery的區(qū)別，感興趣的朋友一起看看吧2018-08-08
AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法示例
這篇文章主要介紹了AngularJS實現(xiàn)自定義指令與控制器數(shù)據(jù)交互的方法,結(jié)合具體實例形式分析了AngularJS自定義指令的實現(xiàn)以及與控制器數(shù)據(jù)交互的操作技巧,需要的朋友可以參考下2017-06-06
本文主要介紹了Angular2組件的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-03-03
AngularJS 在同一個界面啟動多個ng-app應(yīng)用模塊詳解
這篇文章主要介紹了AngularJS 在同一個界面啟動多個ng-app應(yīng)用模塊詳解的相關(guān)資料,需要的朋友可以參考下2016-12-12
Angular.js指令學(xué)習(xí)中一些重要屬性的用法教程
這篇文章主要給大家介紹了關(guān)于Angular.js指令學(xué)習(xí)中一些重要屬性的用法教程，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
AngularJS實現(xiàn)與Java Web服務(wù)器交互操作示例【附demo源碼下載】
這篇文章主要介紹了AngularJS實現(xiàn)與Java Web服務(wù)器交互操作的方法,結(jié)合實例形式較為詳細(xì)的分析了AngularJS前臺ajax提交與javascript后臺處理的完整流程與實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-11-11
解決angularjs中同步執(zhí)行http請求的方法
今天小編就為大家分享一篇解決angularjs中同步執(zhí)行http請求的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08