代理配置不适用于 angular CLI [英] Proxy configuration did not working with angular CLI
问题描述
8080 – 后端托管的端口4200 - 我的 Angular2 前端
在我的 Angular2 项目中，我的文件 proxy.config.json 有这样的内容
<代码>{/api":{"目标": "http://localhost:8080",安全":假，"changeOrigin": "true","pathRewrite": {"^/api": ""}}}在 Angular2 package.json 中，我将启动过程更改为 "start": "ng serve --proxy-config proxy.config.json"当我在 Commander npm start 中输入时，在开始时我可以看到 Proxy created:/api -> http://本地主机:8080.好吧，我想到目前为止还不错.
我正在尝试发送请求 (Angular2)
构造函数(私有http:Http){this.getUsers();}getUsers(): 任何 {返回 this.http.get("/api/getusers").订阅(响应=> {控制台日志(响应)；})}我收到一个错误，http://localhost:4200/api/getusers 404 (未找到).正如我们所看到的，没有任何东西被代理.为什么?我做错了什么吗?
visual studio 代码的控制台输出是
10% 构建模块 2/2 modules 0 active[HPM] 代理创建:/api/->http://本地主机:8080[HPM] 代理重写规则创建:^/api"~>"[HPM] 订阅了 http-proxy 事件:['error', 'close']哈希:d102bcd0909a1776c844时间:27041ms块 {0} main.bundle.js, main.bundle.map (main) 13.6 kB {2} [initial] [rendered]块{1}styles.bundle.js，styles.bundle.map(样式)130 kB {3} [initial] [rendered]块{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: 编译成功.[HPM] 将路径从/api/getusers"重写为/getusers"[HPM] GET/api/getusers ~>http://本地主机:8080这是浏览器控制台响应:
GET http://localhost:4200/api/getusers 404(未找到)error_handler.js:54 异常:响应状态:404 未找到 URL:http://localhost:4200/api/getusersSubscriber.js:238 未捕获的响应 {_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...}这种方式我已经试过了.我的proxy.conf.json文件是这样的:
<代码>{/api":{"目标": "http://localhost:8080",安全":假，"changeOrigin": "true","pathRewrite": {"^/api": ""}}}我已经用这个 "start": "ng serve --proxy-config proxy.conf.json" 替换了 "start": "ng serve"包.json
我的 app.component.ts 文件是这样的:
构造函数(私有http:Http){this.getUsers();}getUsers(): 任何 {return this.http.get("http://localhost:4200/api/getusers").订阅(响应=> {控制台日志(响应)；})}<块引用>
在我的 API 中，它提供了一组来自 http://localhost:8080/getusers 的用户网址
8080 – Port where backend is hosted 4200 – my Angular2 frontend
In My Angular2 project i have file proxy.config.json with content like this
{
"/api": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": "true",
"pathRewrite": {"^/api": ""}
}
}
In Angular2 package.json I changed start procedure to "start": "ng serve --proxy-config proxy.config.json"
When I type inside commander npm start then at the start I can see Proxy created: /api -> http://localhost:8080. Well, so far is good I guess.
I’m trying to send a request (Angular2)
constructor(private http: Http) {
this.getUsers();
}
getUsers(): any {
return this.http.get("/api/getusers")
.subscribe(response => {
console.log(response);
})
}
I’m getting an error that http://localhost:4200/api/getusers 404 (Not Found). As we can see, nothing has been proxied. Why? Did I do something wrong?
Console output of visual studio code is
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
This is browser console response:
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…}
I have tried this way. my proxy.conf.json file is like this:
{
"/api": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": "true",
"pathRewrite": {"^/api": ""}
}
}
and I have replaced "start": "ng serve" with this "start": "ng serve --proxy-config proxy.conf.json" in package.json
my app.component.ts file is like this:
constructor(private http: Http) {
this.getUsers();
}
getUsers(): any {
return this.http.get("http://localhost:4200/api/getusers")
.subscribe(response => {
console.log(response);
})
}
in my API it provides set of user from http://localhost:8080/getusers URL
这篇关于代理配置不适用于 angular CLI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
