@[TOC] angular 端口和host修改以及跨域访问

需求与解决方案

需求1，同时运行多个angular 项目，需要修改不同的端口号

方案1：修改项目端口

需求2，方便公司他人（同一局域网）快速访问你的angular 项目，或者使用处于同一局域网的手机等移动设备访问，以便调试

方案2：可以修改host ,改为本机ip 地址
快速查看本机ip ,打开cmd (快捷方式 win+r)

ipconfig

linux 系统

ifconfig

需求3，使用angular 一般是前后端分离模式，所以会涉及到跨域问题

方案3：通过配置代理来访问
在根目录下新增 proxy.conf.json

target： 后端服务地址，也就是接口地址
ws： 如果是websocket 服务，设置为true
/api: 转发规则，例如 前端发送 this.http.get(‘/api/account’) 会触发代理 ，实际请求 http://192.168.1.101:8080/api/account

{"/api": {"target": "http://192.168.1.101:8080","secure": false},"/websocket": {"target": "http://192.168.1.101:8080","secure": false,"ws": true}
}

修改方式1，修改package.json

修改 package.json 文件
修改"start" 命令

"默认host localhost,端口 4200":" 默认启动地址  http://localhost:4200"
"start":"ng serve",
"修改端口 --port":"",
"start2":"ng serve --port 4201",
"修改host":"",
"start3":"ng serve --host 192.168.1.100",
"配置代理":"proxy.conf.json 放在根目录",
"start4":"ng serve --proxy-config proxy.conf.json",
"同时修改端口和host以及配置代理":""
"start5":"ng serve --port 4201 --host 192.168.1.100 --proxy-config proxy.conf.json"

修改完成后运行相应的命令即可

# 比如同时修改三者
npm run start5

修改方式2，修改 angular.json 文件(angular6+)

angular.json 是 agnular-cli 6 发布后才有的，也就是angular 6 之前的版本是 angular-cli.json

...
"build":{...
},
"serve": {"builder": "@angular-devkit/build-angular:dev-server","options": {"browserTarget": "seaoil-web:build","port": 4201,"host": "192.168.1.100","proxyConfig": "proxy.conf.json",},...}
...

修改完成之后需要重新运行 npm start 命令

npm start

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！