django 后端和角度前端向后端发送请求
Posted
技术标签:
【中文标题】django 后端和角度前端向后端发送请求【英文标题】:django backend and angular frontend send request to backend 【发布时间】:2019-07-19 02:51:02 【问题描述】:你好,我已经完成了 angular 7
basics now 的学习,已经将 django 从后面和 Angular 结合起来,因为我在这个项目的开始阶段
现在我正在为 django 使用 rest_framework
,我希望 angular 向后端发送 GET
请求,因为我们知道 django 使用 127.0.0.1:8000
和 angular 127.0.0.1:4200
,当我执行此功能时
export class HomeComponent implements OnInit
users: Object;
recvedData: boolean = false;
hasError: boolean = false;
constructor(private http: HttpClient)
ngOnInit()
this.http.get('/api/qutes').subscribe(data =>
this.users = data;
console.log(data);
, error =>
this.recvedData = true;
this.hasError = true;
console.log(error);
)
我正在尝试从后端服务器的/api/quets
获取数据
但是它从前端服务器 (127.0.0.1:4200/api/quets
) 请求数据并且这个 URL 不存在我知道我可以添加一个带有变量 domain = "127.0.0.1:8000"
的 service
和 this.http.get(this.service.domain +"/api/quets")
我的问题:
有更好的方法吗?所以它会自动将所有请求发送到
backend
服务器?
【问题讨论】:
更好的方法比如什么? 可以写this.http.get("api/quotes")
而不是this.http.get("127.0.0.1:8000/api/quotes")
除非api
本身包含127.0.0.1:8000/api/
,否则你不能AFAIN。
【参考方案1】:
如果你设置了代理,你可以把url写成/api
,所有http://localhost:4200/api
的调用都会被转移到http://localhost:3000/api
。
From angular docs:
您可以在 webpack 开发服务器中使用 proxying support 将某些 URL 转移到后端服务器,方法是将文件传递给
--proxy-config
构建选项。例如,要将所有对http://localhost:4200/api
的调用转移到在http://localhost:3000/api
上运行的服务器,请执行以下步骤。
文档中提到的步骤是:
在项目src/
文件夹中创建一个文件proxy.conf.json
,在package.json
旁边。
将以下内容添加到新的代理文件中:
"/api":
"target": "http://localhost:3000",
"secure": false
在 CLI 配置文件 angular.json
中,将 proxyConfig
选项添加到服务目标:
...
"architect":
"serve":
"builder": "@angular-devkit/build-angular:dev-server",
"options":
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.json"
,
...
要使用此代理配置运行开发服务器,请致电 ng serve
。
您可以编辑代理配置文件以添加配置选项; docs 中给出了一些示例。有关所有选项的说明,请参阅webpack DevServer documentation。
请注意,如果您编辑代理配置文件,则必须重新启动 ng serve
进程以使您的更改生效。
【讨论】:
以上是关于django 后端和角度前端向后端发送请求的主要内容,如果未能解决你的问题,请参考以下文章