angular4跨域2018-03-06

对于angular4来说,建立一个纯前端的轻量级的项目(前后端分离),会遇到一个跨域访问后台的问题。解决办法如下:

在项目根目录(与package.json文件位置相同),新建一个JSON文件,可以命名为proxy.config.json,其内容如下:

{

"/api": {

"target": "跨域目的ip地址",

"secure": false,

"logLevel": "debug",

"pathRewrite": { "^/api": "" }

}

}

同时在package.json文件找到script,在start后加上一句:

--proxy-config proxy.config.json

题外话,如果需要手机访问页面,只需在后面多加一句,

--proxy-config proxy.config.json --host xx.xx.xx.xx(项目运行的主机ip)

这样的话,运行项目需要的指令变为:npm run start

同时,项目不会自动在网页打开,打开方式变为本机IPxx.xx.xx.xx:4200(端口号),同时手机也可以访问这个地址来访问项目,需在同一局域网下。

配置好api后,需要访问后台就可以跨域,举例说明,登陆时,需要访问localhost:8080端口的loginUser服务。

首先将api配置为http://127.0.0.1:8080,访问后台服务就变为/api/loginUser,如此而已。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 什么是跨域? 2.) 资源嵌入:、、、等dom标签,还有样式中background:url()、@font-fac...
    电影里的梦i阅读 2,393评论 0 5
  • 当放下了一份小小的崇拜与爱慕 向前一份懵懂无知挥手告别 没想到下一份心动会来的那么快 还没准备好 就跟着你的笑容 ...
    LetheC阅读 241评论 0 0
  • 看了《罗辑思维》跨年演讲的朋友们,一定会赞叹于这场演讲的丰富、有趣和充满洞见。这场演讲的主导者是罗振宇——中国自媒...
    老罗80阅读 1,035评论 8 10
  • 晨起静坐凉阴下 畅游海洋于书中 隐约听到脚步声 鬓白银发气色好 木拐径直助阿公 阿公性郭字冕臣 赠我古诗三百首 指...
    小白army阅读 187评论 3 0