Angular 项目端口和host修改以及跨域访问代理配置

@[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