北京乐逍遥网站设计有限公司|乐逍遥网站设计|乐逍遥网站建设|乐逍遥建站|php知识|前端技术|后端技术|网站源码|移动开发|网站运营|UI设计|数据库|网站设计|网站开发|小程序|乐逍遥每日一句|乐逍遥福利图片
主页 > 前端开发 > Angular >

如何在Angular中设置api proxy

时间:2021-04-12  编辑:

开发阶段, 我们的前端和后端可能分别运行在同一台机器的不同端口或同一个局域网内的不同ip上, 前端访问后端api时就会碰到跨域的场景.

这个时候我们可以通过在Augular中设置proxy来解决这个CrossDomain问题.

当然在之后正式发布时, 一般通过后端web服务器(如nginx)或后端代码配置来实现跨域控制.

以下是在Ionic/Angular中设置proxy代理的参考步骤:

(1) 创建proxy.conf.json配置文件

package.json同一级目录下创建proxy.conf.json配置文件, 并加入如下内容:

{  "/api": {    "target": "http://localhost:8000",    "secure": false  }}预览

其中/api表示所有以此作为请求URL开头的request, 都会被代理到真正的后端地址: http://localhost:8000, 这个后端地址根据你的实际情况来定义.

(2) 修改angular.json配置文件

如下增加一行配置"proxyConfig": "proxy.conf.json":

"serve": {   "builder": "@angular-devkit/build-angular:dev-server",   "options": {     "browserTarget": "app:build",     "proxyConfig": "proxy.conf.json"   },   "configurations": {     "production": {       "browserTarget": "app:build:production"     }   }},预览

(3) 修改package.json中的启动配置,如下将:

    "start": "ng serve ",预览

修改为:

"start": "ng serve --proxy-config proxy.conf.json",

(4)重新启动ng进程

npm start

即可实现api请求代理的效果

返回
顶部