Angular4中利用Details實(shí)現(xiàn)反向代理

Angular4中利用Details實(shí)現(xiàn)反向代理，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

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í)際的訪(fǎng)問(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"
 }

關(guān)于Angular4中利用Details實(shí)現(xiàn)反向代理問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。