Angular 跨域问题

需求

在手机或平板上连接开发环境进行测试。（如果在电脑端，直接可以调整Chrome的参数支持跨域，具体可参考之前文章：https://www.zhangbj.com/p/623.html）

解决

添加代理

angular.json文件中的serve节点下添加："proxyConfig": "proxy.json"。

新建proxy.json文件，并和angular.json文件处于同级目录（不同目录配置不同路径即可）。

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "XXX:build",
    "proxyConfig": "proxy.json"
  }

代理

文件proxy.json中的内容如下：

{
    "/ContextPath": {
        "target":"http://192.168.0.1:8080",
        "secure":false,
        "logLevel":"debug",
        "changeOrigin":true

    }

}

配置 baseUrl

baseUrl中的端口需修改为ng serve启动的端口。默认4200。

export const environment = {
  production: false,
  baseUrl: 'http://192.168.0.1:4200/ContextPath/',
};

参考

https://angular.io/guide/build#rewrite-the-url-path