2017-02-20 35 views
5

8080 - Cảng nơi backend được lưu trữ 4200 - frontend Angular2 tôicấu hình Proxy không làm việc với góc CLI

Trong dự án Angular2 My tôi có tập tin proxy.config.json với nội dung như thế này

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

Trong Angular2 package.json Tôi đã thay đổi thủ tục bắt đầu thành "start": "ng serve --proxy-config proxy.config.json" Khi tôi nhập bên trong chỉ huy npm start thì lúc bắt đầu, tôi có thể thấy Proxy được tạo:/api ->http://localhost:8080. Vâng, cho đến nay là tốt tôi đoán.

Tôi đang cố gắng để gửi một yêu cầu (Angular2)

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

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

tôi nhận được một lỗi mà http://localhost:4200/api/getusers 404 (Not Found). Như chúng ta có thể thấy, không có gì đã được ủy nhiệm. Tại sao? Tôi đã làm gì sai sao?

điều khiển đầu ra của mã visual studio là

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 

Đây là trình duyệt giao diện điều khiển phản ứng:

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

bạn đã thử với đầy đủ URL http:// localhost: 4200/api/getusers thay vì/api/getusers – IsuruAb

+0

backend của tôi được lưu trữ tại localhost: 8080/api thats lý do tại sao tôi đang sử dụng cài đặt proxy và localhost: 8080/api/getusers hoạt động tốt. –

+0

đầu ra bàn điều khiển là gì? – IsuruAb

Trả lời

2

Tôi đã thử theo cách này. tập tin proxy.conf.json của tôi là như thế này:

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

và tôi đã thay thế "start": "ng serve" với "start": "ng serve --proxy-config proxy.conf.json" này trong package.json

tập tin app.component.ts của tôi là như thế này:

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

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

     }) 
    } 

trong API của tôi nó cung cấp thiết của người dùng từ http://localhost:8080/getusers URL

+1

Nó hoạt động tốt. –

Các vấn đề liên quan