代理配置不适用于 Angular CLI
Posted
技术标签:
【中文标题】代理配置不适用于 Angular CLI【英文标题】：Proxy configuration did not working with angular CLI 【发布时间】：2017-07-09 09:25:08 【问题描述】：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…
【问题讨论】：
您是否尝试过使用完整 URL localhost:4200/api/getusers 而不是 /api/getusers 我的后端托管在 localhost:8080/api 这就是为什么我使用代理设置，并且 localhost:8080/api/getusers 工作正常。 控制台输出是什么？ 我添加了有问题的控制台输出 你找到解决方案了吗？ 【参考方案1】：我已经尝试过这种方式。 我的 proxy.conf.json 文件是这样的：
"/api":
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": "true",
"pathRewrite": "^/api": ""
我已经在 package.json 中用 "start": "ng serve --proxy-config proxy.conf.json" 替换了 "start": "ng serve"
我的 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 的用户集 网址
【讨论】：
但是，你为什么需要http://localhost:4200/api/getUsers'。尝试提供this.http.get('api/getUsers')。【参考方案2】：
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
【讨论】：
【参考方案3】：试试
"/api/*": "目标": "http://localhost:8080", “安全”：假
【讨论】：
【参考方案4】：使用它，它工作正常。
"/api/*":
"target": "https://172.16.2.10",
"secure": false,
"pathRewrite":
"^/api/*": ""
,
"changeOrigin": true
【讨论】：
请扩展您的答案。 op 做错了什么，为什么你的代码可以工作等等......以上是关于代理配置不适用于 Angular CLI的主要内容，如果未能解决你的问题，请参考以下文章
Apache 2.4 - 简单的反向代理 - 不适用于多个条目