为了账号安全,请及时绑定邮箱和手机立即绑定

如何在Angular中设置api proxy

2019.11.12 10:29 4817浏览

开发阶段, 我们的前端和后端可能分别运行在同一台机器的不同端口或同一个局域网内的不同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请求代理的效果

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消