2017-02-20 31 views
5

8080 - Port gdzie backend jest gospodarzem 4200 - mój Angular2 frontendkonfiguracja proxy nie działa z kątowym CLI

w moim projekcie Angular2 mam pliku proxy.config.json z tego typu treści

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

W Angular2 package.json Zmieniłem procedurę uruchamiania na "start": "ng serve --proxy-config proxy.config.json" Kiedy wpisuję wewnątrz komendanta npm start, na początku widzę Proxy utworzone:/api ->http://localhost:8080. Cóż, jak na razie jest dobrze, myślę.

Próbuję wysłać żądanie (Angular2)

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

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

Dostaję błąd, który http://localhost:4200/api/getusers 404 (nie znaleziono). Jak widać, nic nie zostało proklamowane. Czemu? Czy zrobiłem coś nie tak?

wyjście konsoli wizualnego kodu studio jest

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 

Jest to przeglądarka odpowiedź konsola:

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…} 
+0

próbowałeś z pełnym URL http:// localhost: 4200/api/getusers zamiast/api/getusers – IsuruAb

+0

mój backend jest hostowany na localhost: 8080/api, dlatego używam ustawienia proxy, a localhost: 8080/api/getusers działa poprawnie. –

+0

jakie jest wyjście konsoli? – IsuruAb

Odpowiedz

2

Próbowałem w ten sposób. mój plik proxy.conf.json jest tak:

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

i zastąpiły "start": "ng serve" z tym "start": "ng serve --proxy-config proxy.conf.json" w package.json

mój plik app.component.ts jest tak:

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

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

     }) 
    } 

w moim API to zestaw zapewnia użytkownikowi z http://localhost:8080/getusers URL

+1

Działa dobrze. –

Powiązane problemy