代理配置无法使用角度CLI

时间:2017-02-20 07:32:53

标签: angular angular-cli http-proxy

8080 - 托管后端的端口 4200 - 我的Angular2前端

在我的Angular2项目中,我有文件proxy.config.json,内容如下

{
  "/api": {
  "target": "http://localhost:8080",
  "secure": false,
  "changeOrigin": "true",
  "pathRewrite": {"^/api": ""}
 }
}

在Angular2 package.json中,我将启动过程更改为"start": "ng serve --proxy-config proxy.config.json" 当我在指挥官npm start内输入时,我可以在开始时看到代理创建:/ api - > http://localhost:8080。好吧,到目前为止我觉得很好。

我正在尝试发送请求(Angular2)

  constructor(private http: Http) {
    this.getUsers();
  }

  getUsers(): any {
    return this.http.get("/api/getusers")
      .subscribe(response => {
        console.log(response);
      })
  }

我收到http://localhost:4200/api/getusers 404(未找到)的错误。我们可以看到,没有任何代理。为什么?我做错了吗?

visual studio代码的控制台输出是

 10% building modules 2/2 modules 0 active[HPM] Proxy created: /api/  ->  http://localhost:8080
[HPM] Proxy rewrite rule created: "^/api" ~> ""
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
Hash: d102bcd0909a1776c844
Time: 27041ms
chunk    {0} main.bundle.js, main.bundle.map (main) 13.6 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 130 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.87 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
[HPM] Rewriting path from "/api/getusers" to "/getusers"
[HPM] GET /api/getusers ~> http://localhost:8080

这是浏览器控制台响应:

GET http://localhost:4200/api/getusers 404 (Not Found)
error_handler.js:54 EXCEPTION: Response with status: 404 Not Found for URL: http://localhost:4200/api/getusers
Subscriber.js:238 Uncaught Response {_body: "<html><head><title>Apache Tomcat/7.0.47 - Error re…hade"><h3>Apache Tomcat/7.0.47</h3></body></html>", status: 404, ok: false, statusText: "Not Found", headers: Headers…}

4 个答案:

答案 0 :(得分:3)

我试过这种方式。 我的proxy.conf.json文件是这样的:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false,
    "changeOrigin": "true",
    "pathRewrite": {"^/api": ""}
  }
}

我已将"start": "ng serve"替换为package.json

中的"start": "ng serve --proxy-config proxy.conf.json"

我的app.component.ts文件是这样的:

  constructor(private http: Http) {
    this.getUsers();
  }

  getUsers(): any {
    return this.http.get("http://localhost:4200/api/getusers")
      .subscribe(response => {
        console.log(response);

      })
  }
  

在我的API中,它提供了来自http://localhost:8080/getusers的一组用户   URL

答案 1 :(得分:0)

json 在我的项目中不起作用,但在 JS 中有效。

示例:proxy.conf.js 文件

const PROXY_CONFIG = [
   {
    context: ['/api'],
    target: 'http://localhost:8080/',
    secure: false,
    logLevel: 'debug',
    pathRewrite: {'^/api' : ''}
  }
];
module.exports = PROXY_CONFIG;

在 package.json 中:

...
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.js", //this line
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

在 service.ts 中:

use this URL: '/api/getusers'

最后你应该开始:

npm start

答案 2 :(得分:-1)

尝试

{   &#34; / api / *&#34;:{     &#34; target&#34;:&#34; http://localhost:8080&#34;,     &#34;安全&#34;:错误   } }

答案 3 :(得分:-1)

使用它,效果很好。

import speech_recognition as sr
import pyttsx3
import datetime

r = sr.Recognizer()
mic = sr.Microphone()
engine = pyttsx3.init()
engine.setProperty('rate',120)  #75 words per minute
engine.setProperty('volume',0.9) #loudness of speaker

def getTime():
    str((datetime.datetime.now())

with mic as source:
    audio = r.listen(source)

myInput = r.recognize_google(audio)

responses = {"hello":"hello there", "thanks":"don't mention it", "time":getTime}

if myInput in responses.keys():
    engine.say(responses[myInput])
    engine.runAndWait()

else:
    engine.say("Sorry I don't understand that")
    engine.runAndWait()