[英]Angular-CLI proxy doesn't work
我正在使用一个新的angular-cli“my-project”并创建了一个简单的虚拟服务。 我希望此服务连接到本地计算机上的laravel后端。 我发现后端的Angular-CLI代理不起作用,但即使这些步骤对我来说也不起作用。 Chrome仍然会访问localhost:4200。
我的服务
import { Injectable } from '@angular/core';
import {Http, Response} from '@angular/http';
@Injectable()
export class DummyService {
constructor(private http: Http) {
console.log('Hello dummyService');
}
getMessages() {
return this.http.get('/backend/public/api/auth/login').map((res: Response) => res.json());
}
}
我的proxy.config.json
{
"/backend": {
"target": "http://localhost:81/laravelapi",
"secure": false,
"pathRewrite": {"^/backend" : ""},
"changeOrigin": true,
"logLevel": "debug"
}
}
我的开始是package.json的开头
"start": "ng serve --proxy-config proxy.config.json",
启动时,我得到以下日志消息:
** NG Live Development Server is running on http://localhost:4200 **
0% compiling
10% building modules 1/1 modules 0 active
10% building modules 4/4 modules 0 active[HPM] Proxy created: /backend -> http://localhost:81/laravelapi
[HPM] Proxy rewrite rule created: "^/backend" ~> ""
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
10% building modules 4/5 modules 1 active ...ct\node_modules\jquery\dist\jquery.js
10% building modules 5/6 modules 1 active ...e_modules\metismenu\dist\metisMenu.js
最后:
webpack: Compiled successfully.
[HPM] Rewriting path from "/backend/public/api/auth/login" to "/public/api/auth/login"
[HPM] GET /backend/public/api/auth/login ~> http://localhost:81/laravelapi
但在浏览器中我得到GET http:// localhost:4200 / backend / public / api / auth / login 404(Not Found)
所以似乎不起作用。 我正在使用“@ angular / cli”:“^ 1.0.0”。
我有什么想法吗?
我只想在我的代码/ backend / public / api / auth / login中写入,这些调用应该在我的本地机器上进行http:// localhost:81 / laravelapi / public / api / auth / login进行开发。
thx任何建议! 彼得
你的网址是/ backend / public / api / auth / login,所以你的代理应该是这个,即后端/ *
{
"/backend/*": {
"target": "http://localhost:81/laravelapi",
"secure": false,
"pathRewrite": {"^/backend" : ""},
"changeOrigin": true,
"logLevel": "debug"
}
}
脚步
1)在Angular CLI应用程序根文件夹中,创建一个名为proxy.conf.json
的新文件
粘贴到以下JSON对象中。
{
"/*/*": {
"target": "http://localhost:81",
"secure": false,
"changeOrigin": true,
"logLevel": "debug"
}
}
2)打开package.json
文件并更改:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
... 至:
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
3)
A)打开命令提示符
B)转到Angular Cli应用程序的根文件夹
C)键入npm start
并按Enter键
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.