Angular4 反向代理Details實(shí)踐
更新時(shí)間：2018年05月30日 10:20:01 作者：navk
本篇文章主要介紹了Angular4 反向代理Details實(shí)踐，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了Angular4 反向代理Details實(shí)踐，分享給大家，具體如下：
1. 設(shè)置proxy.config.json文件
{
"/api": { //這里是前臺(tái)調(diào)用后端接口時(shí)做的代理標(biāo)識(shí)
"target": "localhost:3100",
"logLevel": "debug",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
}
注意：pathRewrite 部分的配置，"pathRewrite": {"^/api": ""} 如果沒(méi)有這部分的配置，那在發(fā)送請(qǐng)求的時(shí)候，實(shí)際請(qǐng)求的地址將會(huì)是http://localhost:3100/api/actionapi/。相較于真實(shí)url，會(huì)多出/api這一部分。
2. 設(shè)置service的url
//這里的api表示代理標(biāo)識(shí) //實(shí)際的訪問(wèn)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啟動(dòng)一下項(xiàng)目，應(yīng)該就能啟用angular反向代理了。
**順便再補(bǔ)充一下webpack和angular的proxy地址：
https://webpack.js.org/configuration/dev-server/#devserver-proxy
https://github.com/angular/angular-cli/wiki/stories-proxy**
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
如何編寫(xiě)一個(gè)完整的Angular4 FormText 組件
本篇文章主要介紹了如何編寫(xiě)一個(gè)完整的Angular4 FormText 組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Angular中使用Api 代理的實(shí)現(xiàn)
我們對(duì)接的過(guò)程中總是遇到跨域的問(wèn)題，本文使用 angualr 來(lái)講解代理api對(duì)接的話題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
AngularJS 通過(guò)新的屬性和表達(dá)式擴(kuò)展了 HTML。AngularJS 可以構(gòu)建一個(gè)單一頁(yè)面應(yīng)用程序（SPAs：Single Page Applications）。本文給大家介紹angularjs 的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-10-10
MODULE_INITIALIZER初始化Angular?懶加載模塊高級(jí)技巧
這篇文章主要為大家介紹了MODULE_INITIALIZER初始化Angular懶加載模塊高級(jí)技巧示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
前端技術(shù)的發(fā)展是如此之快，各種優(yōu)秀技術(shù)、優(yōu)秀框架的出現(xiàn)簡(jiǎn)直讓人目不暇接，緊跟時(shí)代潮流，學(xué)習(xí)掌握新知識(shí)自然是不敢怠慢。下面這篇文章主要給大家介紹了AngularJS中run方法的巧妙運(yùn)用,需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
這篇文章主要介紹了Angularjs的鍵盤(pán)事件的綁定的相關(guān)資料,這里提供了兩種方法，1.ng內(nèi)置指令，2.自定義指令，并進(jìn)行比較，需要的朋友可以參考下2017-07-07
這篇文章主要介紹了詳解Angular5 路由傳參的3種方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要為大家詳細(xì)介紹了Angularjs使用過(guò)濾器完成排序功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
AngularJS與BootStrap模仿百度分頁(yè)的示例代碼
分頁(yè)在很多時(shí)候都能用到，這篇文章主要介紹了AngularJS與BootStrap模仿百度分頁(yè)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要給大家介紹了關(guān)于Angular中sweetalert彈框的基本使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07